代码之家 › 专栏 › 技术社区 › a coder

带有vee validate的基本示例不工作

vee-validate vue.js

a coder · 技术社区 · 6 年前

我正在尝试使一个简单的表单验证页与vee validate一起工作。不过,有些东西似乎被打破了,我不确定自己到底做错了什么。

span标记显示为原始HTML:。

标记:

<!文档类型HTML>
<HTML>
<头部>
<script type='text/javascript'src=“https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script type='text/javascript'src=“https://cdn.jsdelivr.net/npm/vee validate@latest/dist/vee validate.js”></script>
</head>
<正文>
<script type='text/javascript'>
vue.use(veevalidate);//很好。
新Vue({
el:'应用',
数据:{
电子邮件\主要:空
}
})(二)
</script>


<div id=“app”>
<form action=''method='post'>
<input v-validate=“'required email'”:class=“”input':true,'is danger':errors.has('email_primary')”name=“email_primary”type=“text”placeholder=“email_primary”>
<span v-show=“errors.has('email_primary')”class=“help is danger”>errors.first('email_primary')</span>
<button class=“button is link”name='submitform'value='go'>提交</button>
</Form>
</DIV>

</body>
</html>
fiddle。


我需要做什么才能使vee验证按预期工作?

span标记显示为原始HTML:



标记:

<!DOCTYPE html>
<html>
   <head>
      <script type='text/JavaScript' src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script type='text/JavaScript' src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>
   </head>
   <body>
      <script type='text/JavaScript'>
         Vue.use(VeeValidate); // good to go.
         new Vue({
           el: '#app',
           data: {
              email_primary: null
           }
         });
      </script>


      <div id="app">
         <form action='#' method='POST'>
            <input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email_primary') }" name="email_primary" type="text" placeholder="email_primary">
            <span v-show="errors.has('email_primary')" class="help is-danger">{{ errors.first('email_primary') }}</span>
            <button class="button is-link" name='submitform' value='go'>Submit</button>
         </form>
      </div>

    </body>
</html>


Fiddle.

我需要做什么才能使vee验证按预期工作?

1 回复 | 直到 6 年前

Derek Pollard 6 年前

问题

这似乎是一些事情,但主要的罪魁祸首是 type 所有脚本标记的属性都设置为 text/JavaScript 这是无效的。最好是不设置类型,或者如果设置类型,则将其设置为 text/javascript .

还有,因为你在利用 div#app 作为模板而不仅仅是根元素,我添加了适当的属性。

最后,始终加载您的javascript 之后您的HTML。

固定代码

<!DOCTYPE html>
<html>
   <head>
      
   </head>
   <body>
       <div id="app">
         <form action='#' method='POST'>
            <input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email_primary') }" name="email_primary" type="text" placeholder="email_primary">
            <span v-show="errors.has('email_primary')" class="help is-danger">{{ errors.first('email_primary') }}</span>
            <button class="button is-link" name='submitform' value='go'>Submit</button>
         </form>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>
      <script>
         Vue.use(VeeValidate); // good to go.
         new Vue({
           el: "#app",
           template: '#app',
           data() {
            return {
              email_primary: null
            };
           }
         });
      </script>
    </body>
</html>

另外,A working jsfiddle .

希望这有帮助!