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

verify

版本已更新至2.0 说明
github:https://github.com/liuyinglong/verify
npm:https://www.npmjs.com/package/vue-verify-plugin

verify

install

npm install vue-verify-plugin

use

<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>

验证错误信息说明

验证之后的错误存储在 vm.$verify.$errors 中，可自行打印出
vm.$verify.$errorArray 存储上一次验证的错误

配置说明

配置传入一个对象

{    rules:{}//自定义验证方法    blur:Bool //失去焦点时 是否开启验证}

指令说明

v-verify

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

v-verify 修饰符说明

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

//自定义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-remind修饰符说明

.join 展示所有错误 用逗号隔开

v-verified (在2.0版本中 被v-remind替代)

v-verified 错误展示，当有错误时会展示，没有错误时会加上style:none,默认会展示该数据所有错误的第一条
该指令为语法糖(见示例)

<input v-model="username" v-verify="username"><label v-show="$verify.$errors.username && $verify.$errors.username.length" v-text="$verify.$errors.username[0]"></label><!--等价于--><label v-verified="$verify.$errors.username"></label>

v-verified 修饰符说明

.join 展示所有错误 用逗号隔开

默认验证规则

• email 邮箱规则验证
• mobile 手机号码验证
• required 必填
• url 链接规则验证
• maxLength 最多maxLength个字符串(可自定义message)
• minLength 最少minLength个字符串(可自定义)

<script>verify: {    username: [        "required",        {            minLength:2,            message: "姓名不得小于两位"        },        {            maxLength:5,            message: "姓名不得大于5位"        }    ],    mobile:["required","mobile"],    email:"email"    url:"url"    pwd: {        minLength:6,        message: "密码不得小于6位"    }},</script>

自定义验证规则

<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>                <div>                    <input v-model="teacher" v-verify="age" placeholder="teacher"/>                    <label class="fl" v-remind="teacher"></label>                </div>        <button v-on:click="submit">提交</button>    </div></template><script>    import Vue from "vue";    import verify from "vue-verify-plugin";        var myRules={        max6:{            test:function(val){                if(val.length>6) {                    return false                }                return true;            },            message:"最大为6位"        }            }    import Vue from "vue";    import verify from "vue-verify-plugin";    Vue.use(verify,{        rules:myRules    });    export default {        name: 'app',        data () {            return {                age:"",                teacher:"",                regInfo: {                    phone: ""                }            }        },        verify: {            age:"required",            teacher:"max6",            regInfo: {                phone: ["required","mobile"]            }        },        methods:{            submit: function () {                console.log(this.$verify.check());            }        }    }</script>