vue表单验证组件 v-verify-plugin

最近在整vue的表单验证，各种找插件；现在网上疯传的几种都试过了，各种报错，心都凉了，抱着不撞南墙不回头的的心态（ps：懒癌发作）；终于找到了v-verify-plugin这个插件；头大的是最终自定义组件的时候终会报错，要哭了有没有？？？耗费一天，终于曲线救国成功，不废话，接下来一起看看吧

一、安装

    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="手机号码" 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

在表单控件元素上创建数据的验证规则，他会自动匹配要验证的值以及验证的规则。

v-verify 修饰符说明

该指令最后一个修饰符为自定义分组//自定义teacher分组

    //自定义teacher分组
    v-verify.teacher
    //自定义student分组
    v-verify.student

    //验证时可分开进行验证  

    //验证student 分组
    this.$verify.check("student")
    //验证teacher 分组
    this.$verify.check("teacher")
    //验证所有
    this.$verify.check();

v-verify指令也可使用 arg参数进行验证分组

如果同时使用修饰符和arg分组 则arg会覆盖修饰符分组

    v-verify:student
    //验证student 分组
    this.$verify.check("student")

v-remind 和 v-verified 验证错误提示

不得不吐槽一下，v-remind在自定义规则（或者说要验证长度的规则死报错有木有）
至于v-verified在2.0中已经被v-remind取代，但是在自定义规则中必须要用，手动蓝瘦

默认验证规则

• email 邮箱规则验证

• mobile 手机号码验证

• required 必填

• url 链接规则验证

• maxLength 最多maxLength个字符串(可自定义message)

• minLength 最少minLength个字符串(可自定义)

   <template>
     <div class="input-box clearFix">
       <div>
         <input type="text" class="phoneIcon fl" placeholder="手机号码" 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: {      //默认插件，必须要用v-verified和计算属性，以下都是
           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: {     //这个是关键，有长度的地方必须要有
         verifyError() {
           return this.$verify.$errors;
         }
       }
     }
   </script>
  

具体就这样啦，感谢setfocus大佬，但报错是真的，弄了一天要炸了有没有，手动笑哭