vue-verify-plugin。vue项目表单验证插件

安装 npm install vue-verify-plugin

使用

main.js

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

 使用

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

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

</script>

v-verify 修饰符说明
 

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

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

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

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

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

v-remind 验证错误提示

来自： vue-verify-plugin - npm