vee-validate 不工作的基本示例

Question

我正在尝试使用 vee-validate 制作一个简单的表单验证页面。虽然有些东西似乎坏了，但我不确定我到底做错了什么。

跨度标记显示为原始 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-validate 按预期工作？

Answer 1

问题

似乎有几件事，但罪魁祸首是所有脚本标签上的 type 属性都设置为无效的 text/JavaScript。最好不要设置类型，或者如果设置了，请将其设置为 text/javascript.

此外，由于您使用 div#app 作为模板而不仅仅是根元素，因此我添加了适当的属性。

最后，始终在 html 之后加载 javascript 。

固定代码

<!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>

还有一个working jsfiddle.

希望对您有所帮助！

vee-validate 不工作的基本示例

Basic example with vee-validate not working

vue.js

vee-validate

问题

固定代码