最近在整vue的表單驗(yàn)證深寥，各種找插件；現(xiàn)在網(wǎng)上瘋傳的幾種都試過了块仆，各種報(bào)錯构蹬，心都涼了王暗，抱著不撞南墻不回頭的的心態(tài)（ps：懶癌發(fā)作）；終于找到了v-verify-plugin這個插件庄敛；頭大的是最終自定義組件的時候終會報(bào)錯俗壹，要哭了有沒有？藻烤？绷雏？耗費(fèi)一天，終于曲線救國成功怖亭，不廢話之众，接下來一起看看吧

一、安裝

    npm install vue-verify-plugin -S

二依许、初始 demo

  <template>
        <div class="input-box clearFix">
            <div>
                <input v-model="age" v-verify="age" placeholder="age"/>
                <label class="fl" v-remind="age"></label>
            </div>
            <div>
                <input type="text" class="phoneIcon fl" placeholder="手機(jī)號碼" v-model="regInfo.phone" v-verify="regInfo.phone">
                <label class="fl" v-remind="regInfo.phone"></label>
            </div>
            <button v-on:click="submit">提交</button>
        </div>
    </template>

    <script>
        import Vue from "vue";
        import verify from "vue-verify-plugin";
        Vue.use(verify,{
            blur:true
        });

        export default {
            name: 'app',
            data () {
                return {
                    age:"",
                    regInfo: {
                        phone: ""
                    }
                }
            },
            verify: {
               age:"required",
               regInfo: {
                    phone: ["required","mobile"]
                }
            },
            methods:{
                submit: function () {
                    console.log(this.$verify.check());
                }
            }
        }
    </script>

指令說明

v-verify

在表單控件元素上創(chuàng)建數(shù)據(jù)的驗(yàn)證規(guī)則，他會自動匹配要驗(yàn)證的值以及驗(yàn)證的規(guī)則缀蹄。

v-verify 修飾符說明

該指令最后一個修飾符為自定義分組//自定義teacher分組

    //自定義teacher分組
    v-verify.teacher
    //自定義student分組
    v-verify.student

    //驗(yàn)證時可分開進(jìn)行驗(yàn)證  

    //驗(yàn)證student 分組
    this.$verify.check("student")
    //驗(yàn)證teacher 分組
    this.$verify.check("teacher")
    //驗(yàn)證所有
    this.$verify.check();

v-verify指令也可使用 arg參數(shù)進(jìn)行驗(yàn)證分組

如果同時使用修飾符和arg分組 則arg會覆蓋修飾符分組

    v-verify:student
    //驗(yàn)證student 分組
    this.$verify.check("student")

v-remind 和 v-verified 驗(yàn)證錯誤提示

不得不吐槽一下峭跳，v-remind在自定義規(guī)則（或者說要驗(yàn)證長度的規(guī)則死報(bào)錯有木有）
至于v-verified在2.0中已經(jīng)被v-remind取代，但是在自定義規(guī)則中必須要用缺前，手動藍(lán)瘦

默認(rèn)驗(yàn)證規(guī)則

• email 郵箱規(guī)則驗(yàn)證

• mobile 手機(jī)號碼驗(yàn)證

• required 必填

• url 鏈接規(guī)則驗(yàn)證

• maxLength 最多maxLength個字符串(可自定義message)

• minLength 最少minLength個字符串(可自定義)

   <template>
     <div class="input-box clearFix">
       <div>
         <input type="text" class="phoneIcon fl" placeholder="手機(jī)號碼" v-model="mobile" v-verify="mobile">
         <label class="fl" v-remind="mobile"></label>
       </div>
       <div>
       <div>
         <input type="text" placeholder="密碼" v-verify="pwd" v-model="pwd" />
         <label v-verified="verifyError.pwd"></label>
       </div>
       <div>
         <input type="text" placeholder="username" v-verify="username" v-model="username" />
         <label v-verified="verifyError.username"></label>
       </div>
       <div>
         <input type="text" placeholder="phone" v-verify="phone" v-model="phone" />
         <label v-verified="verifyError.phone"></label>
       </div>
  
       <button v-on:click="submit">提交</button>
     </div>
   </template>
  
   <script>
     import Vue from "vue";
     import verify from "vue-verify-plugin";
  
     Vue.use(verify, {
       blur: true
     });
  
     export default {
       name: 'app',
       data() {
         return {
           mobile: "",
           username: "",
           pwd: "",
           phone: ""
         }
       },
       verify: {
         mobile: ["required", "mobile"],
         pwd: {      //默認(rèn)插件蛀醉，必須要用v-verified和計(jì)算屬性，以下都是
           minLength: 6,
           message: "密碼不得小于6位"
         },
         username: [     //自定義的插件
           "required",
           {
             test: function (val) {
               if (val.length < 2) {
                 return false;
               }
               return true;
             },
             message: "姓名不得小于2位"
           }
         ],
         phone: {      //自定義的插件
           test: /^1[34578]\d{9}$/,
           message: "電話號碼格式不正確"
         },
       },
       methods: {
         submit: function () {
           console.log(this.$verify.check());
         }
       },
       computed: {     //這個是關(guān)鍵衅码，有長度的地方必須要有
         verifyError() {
           return this.$verify.$errors;
         }
       }
     }
   </script>
  

具體就這樣啦拯刁，感謝setfocus大佬，但報(bào)錯是真的逝段，弄了一天要炸了有沒有垛玻，手動笑哭