Question

我正在尝试使用vee-validate创建一个简单的表单验证页面。不过似乎有些问题，我不确定我到底在做什么错。

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-validate正常工作？

Answer 1

问题

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

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

最后，始终在之后加载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>

还有一个working jsfiddle。

我希望这会有所帮助！

vee-validate无法正常工作的基本示例

1 个答案:

问题

固定代码