Question

我正在尝试使用vee-validate创建一个简单的表单验证页面。不过似乎有些问题，我不确定我到底在做什么错。我收到vue控制台错误errors not defined 有什么建议吗？

<!DOCTYPE html>
<html>
<head><head>
<body>
    <div id="app">
      <h1>asdfasd</h1>
        <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/3.0.5/vee-validate.full.min.js"></script>  
     <script>
        Vue.use(VeeValidate);
        new Vue({
          el: "#app",
          template: '#app',
          data() {
           return {
             email_primary: null
           };
          }
        });
     </script>
</body>
</html>

Answer 1

您似乎使用了veevalidate 3而不是veeValidate2。我在回答中已经将veevalidate更新为版本2，并添加了v-model="email_primary"

由于您已经有了模板，因此我已删除template: '#app',。请参见下面

<!DOCTYPE html>
<html>

<head>

    <head>

    <body>
        <div id="app">
            <h1>asdfasd</h1>
            <form action='#' method='POST'>
                <input v-model="email_primary" 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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
        <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/2.2.15/vee-validate.min.js"></script>
        <script>
            Vue.use(VeeValidate);
            new Vue({
                el: "#app",                
                data() {
                    return {
                        email_primary: null
                    };
                }
            });
        </script>
    </body>
</html>

这里是working fiddle。希望我的回答会有所帮助。

Vee验证基本示例不起作用-未定义错误

1 个答案: