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

入门 Link to heading

以Vue Cli2.x为例

引入 Link to heading

在main.js中引入并use

import WyValidate from 'wy-validate';

Vue.use(VeeValidate);

页面使用 Link to heading 

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

定义规则 Link to heading 

 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" }
        ]
      }
    }
  }

规则说明 Link to heading

暂无

自定义指令名称 Link to heading

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

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

注意事项(已知问题) Link to heading

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

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

  3. 务必给表单项添加name

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

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

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