Vue轻量级表单验证插件wy-validate v0.0.5

目前功能还不全可能会有BUG

入门

以Vue Cli2.x为例

引入

在main.js中引入并use

import WyValidate from 'wy-validate';

Vue.use(VeeValidate);

页面使用

<input type="text" name="wangyu1" v-wyValidate="rules1">
<span v-show="wyError.wangyu1 ? wyError.wangyu1.showMessage : false">{{wyError.wangyu1 ? wyError.wangyu1.message : ''}}</span>
<br>

<input type="text" name="wangyu2" v-wyValidate="rules2">
<span v-show="wyError.wangyu2 ? wyError.wangyu2.showMessage : false">{{wyError.wangyu2 ? wyError.wangyu2.message : ''}}</span>
<br>

<input type="text" name="wangyu3" v-wyValidate="rules3">
<span v-show="wyError.wangyu3 ? wyError.wangyu3.showMessage : false">{{wyError.wangyu3 ? wyError.wangyu3.message : ''}}</span>

定义规则

export default {
   name: 'App',
   data() {
     return {
       rules1: [
         { required: true,message: "不能为空",trigger: "blur" },
         { message: "请输入正确的格式!",min: 5,max: 16,trigger: "input" }
       ],
       rules2: [
         { required: true,message: "不能为空",trigger: "blur" },
         { type: "email",message: "请输入邮箱",trigger: "input" }
       ],
       rules3: [
         { required: true,message: "不能为空",trigger: "blur" },
         { regex: '^1(3|4|5|7|8)\\d{9}$',message: "请输入正确的电话号码",trigger: "input" }
       ]
     }
   }
 }

规则说明

暂无

自定义指令名称

默认指令名称为wyValidate，自定义则需要这样写，注意和其他指令命名冲突。

Vue.use(WyValidate,{directiveName: "这里写自定义的指令名称"});

注意事项(已知问题)

1. 插件会向每个Vue实例的data中添加一个wyError，开发时请避免命名冲突

2. 规则的数据类型为数组

3. 务必给表单项添加name

4. 插件使用自定义指令的方式进行表单验证，错误值会储存在wyError中，当前错误值为wyError.name值.message

5. wyError.name值.message.validated 为当前表单项验证状态

6. 如果当前项可以为空，必须写required: false这条规则