install
npm install vue-verify-plugin
use
<div> <span class="left">姓名</span> <input class="left" v-model="name" v-verify.name="name"/> <span class="left">联系电话</span> <input class="left" v-model="phone" v-verify.phone="phone"/> </div> <script> //在指定页面引入 import verify from "vue-verify-plugin" Vue.use(verify, { blur: true //设置离开焦点后触发 }) export default { name: 'app', data () { }, verify: { phone: ["required", "mobile"], }, } </script>
指令说明
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();
默认验证规则
- email 邮箱规则验证
- mobile 手机号码验证
- required 必填
- url 链接规则验证
- maxLength 最多maxLength个字符串(可自定义message)
- minLength 最少minLength个字符串(可自定义)
自定义验证规则
name: [ 'required', { test: function (val) { if (val.length < 2) { return false } return true }, message: "姓名不得小于2位" } ],