最近在整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大佬，但报错是真的，弄了一天要炸了有没有，手动笑哭
