4

我正在尝试使用 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>

小提琴。

我需要做什么才能使 vee-validate 按预期工作？

4

1 回答 1

3

问题）

这似乎是一些事情，但主要的罪魁祸首是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>

此外，一个工作 jsfiddle。

我希望这有帮助！

于 2018-06-19T21:59:52.297 回答