Validator

hey-validator是配合heyui使用的表单数据验证插件，其中集成了常用且多样化的校验方式，包含单个数据校验和多个数据校验，均可进行自定义校验规则，扩展性极强，帮助你解决绝大部分表单验证情况，快速完成应用开发。

安装

npm install --save hey-validator

文档

初始化参数

{
  rules: {},          // 单个数据验证
  combineRules: {},   // 多个数据合并验证
  required:[],        // 是否必填
  int:[],             // 整数
  number:[],          // 数字
  email:[],           // 邮箱
  url:[],             // 网址
  tel:[],             // 电话号码
  mobile:[],          // 手机号
  globalmobile:[]     // 国际号码
}

示例

基础示例

  <Form :model="model" :rules="validRules" ref="form">
    <FormItem label="金额" prop="amount">
      <input type="text" v-model="model.amount">
    </FormItem>
    <FormItem label="网址" prop="url">
      <input type="text" v-model="model.url">
    </FormItem>
    <FormItem label="邮箱" prop="email">
      <input type="text" v-model="model.email">
    </FormItem>
    <FormItem label="手机" prop="mobile">
      <input type="text" v-model="model.mobile">
    </FormItem>
  </Form>

  data() {
    return {
      model: {
        amount: null,
        url: null,
        email: null,
        mobile: null
      },
      validRules: {
        required: ['amount', 'url', 'email', 'mobile'],
        // 可以这样用
        rules: {
          amount: {
            type: 'number'
          }
        },
        // 也可以这样
        url: ['url'],
        email: ['email'],
        mobile: ['mobile']
      }
    }
  }

内置基础类型验证

int           // 整数
number        // 数字
email         // 邮箱
url           // 网址
tel           // 电话号码
mobile        // 手机号
globalmobile  // 国际号码

示例1

  <Form :model="model" :rules="validRules" ref="form">
    <FormItem label="金额" prop="amount">
      <input type="text" v-model="model.amount">
    </FormItem>
  </Form>

  data() {
    return {
      model: {
        amount: null
      },
      validRules: {
        rules:{
          amount: {
            type: 'number',
            required: true
          }
        }
      }
    }
  }
  // 当输入字符串的结果
  {amount: 'a'}   // {a:{message: '不是正确的数字格式', type: 'base', valid: false}}

示例2

  <Form :model="model" :rules="validRules" ref="form">
    <FormItem label="金额" prop="mobile">
      <input type="text" v-model="model.mobile">
    </FormItem>
  </Form>

  data() {
    return {
      model: {
        mobile: null
      },
      validRules{
        rules:{
          mobile: {
            type: 'mobile',
            required: true
          }
        }
      }
    }
  }
  //空验证
  {mobile: ''}    // {a:{message: '不能为空', type: 'base', valid: false}}
  //手机号码格式验证
  {mobile: 123}   // {a:{message: '不是正确的手机号码格式', type: 'base', valid: false}}

基础校验

  required    // 是否必填
  maxLen      // 最大长度
  minLen      // 最小长度
  max         // 最大值
  min         // 最小值 

示例：最大长度

  <Form :model="model" :rules="validRules" ref="form">
    <FormItem label="长度测试" prop="a">
      <input type="text" v-model="model.a">
    </FormItem>
  </Form>

  data() {
    return {
      model: {
        a: null
      },
      validRules: {
        rules:{
          a: {
            maxLen: 5
          }
        }
      }
    }
  }
  // 长度验证结果
  {a: 'aaaaaa'}   // {a:{message: '文字长度不能超过5个字', type: 'base', valid: false}}

示例：最大值

  <Form :model="model" :rules="validRules" ref="form">
    <FormItem label="最大值" prop="a">
      <input type="text" v-model="model.a">
    </FormItem>
  </Form>

  data() {
    return {
      model: {
        a: null
      },
      validRules: {
        rules:{
          a: {
            type: 'number',
            max: 9
          }
        }
      }
    }
  }
  //最大值验证
  {a: 99}   // {a:{message: '不能大于9', type: 'base', valid: false}}

自定义验证方式

示例1：正则表达式校验

  <Form :model="model" :rules="validRules" ref="form">
    <FormItem label="数字" prop="a">
      <input type="text" v-model="model.a">
    </FormItem>
  </Form>

  data() {
    return {
      model: {
        a: null
      },
      validRules: {
        rules:{
          a: {
            valid: {
              pattern: /^[0-9]+$/,
              message: '请输入正确的数字格式'
            },
            max: 99
          }
        }
      }
    }
  }
  // 数字格式验证
  {a: 'a'})   // {a:{message: '请输入正确的数字格式', type: 'base', valid: false}}
  //最大值验证
  {a: 100}    // {a:{message: '不能大于99', type: 'base', valid: false}}

示例2：使用valid方法进行验证

  <Form :model="model" :rules="validRules" ref="form">
    <FormItem label="valid" prop="a">
      <input type="text" v-model="model.a">
    </FormItem>
  </Form>

  data() {
    return {
      model: {
        a: null
      },
      validRules: {
        rules:{
          a: {
            type: 'number',
            valid(prop, parent, data) {
              if(prop< 0 || prop > 100) {
                  return '必须介于0至100之间'
              }
              return true;
            }
          }
        }
      }
    }
  }
  // 原生valid验证
  {a: -1}  // {a:{message: '必须介于0至100之间', type: 'base', valid: false}}

异步validAsync验证

  <Form :model="model" :rules="validRules" ref="form">
    <FormItem label="validAsync" prop="a">
      <input type="text" v-model="model.a">
    </FormItem>
  </Form>

  data() {
    return {
      model: {
        a: null
      },
      validRules: {
        rules:{
          a: {
            type: 'number',
            validAsync(prop, next, parent , data){
              $.ajax('/test').then((resp)){
                if(resp.isExsit){
                  next("已存在");
                }
                if(resp.value < 0 || resp.value > 100) {
                  next('必须介于0至100之间')
                }
                next()
              }
            }
          }
        }
      }
    }
  }
  // 异步valid
  // {a:{message: '必须介于0至100之间', type: 'base', valid: false}}

多个数据合并验证

补充说明：多个数据是指combineRules对象中的refs属性中的数据，valid方法中的参数依次代表refs中的参数，顺序保持一致。

示例1

  <Form :model="model" :rules="validRules" ref="form">
    <FormItem label="数据b" prop="b">
      <input type="text" v-model="model.b">
    </FormItem>
    <FormItem label="数据c" prop="c">
      <input type="text" v-model="model.c">
    </FormItem>
  </Form>

  data() {
    return {
      model: {
        b: null,
        c: null
      },
      validRules: {
        combineRules:[{
          // parentRef: 'e[]', // 如果验证的是子级的数据，则需要定义父级
          refs: ['b', 'c'],
          valid(valueb,valuec){
            if(valueb > valuec){
              return "b不能大于c";
            }
            return true;
          }
        }]
      }
    }
  }
  // 合并验证，这里需要注意的是默认会报错在最后一个数据，也就是会在页面上对应数据的地方报错提醒
  {b: 3, c:2}   // {b:{message: null, type: "base", valid: true}} {c: {message: "b不能大于c", type: "combine", valid: false}}

示例2：子级数据验证

  data() {
    return {
      model: {
        b: null,
        c: null
      },
      validRules: {
        combineRules:[{
          parentRef: 'e[]', // 如果验证的是子级的数据，则需要定义父级
          refs: ['b', 'c'],
          valid(valueb,valuec){
            if(valueb > valuec){
              return "b不能大于c";
            }
            return true;
          }
        }]
      }
    }
  }
  // 合并验证，这里需要注意的是默认会报错在最后一个数据，也就是会在页面上对应数据的地方报错提醒
  {e:[{b: 1, c:2}, {b: 3, c: 2}]}
  // e: {message: null, type: "base", valid: true}
  // e[0]: {message: null, type: "base", valid: true}
  // e[0].b: {message: null, type: "combine", valid: true}
  // e[0].c: {message: null, type: "combine", valid: true}
  // e[1]: {message: null, type: "base", valid: true}
  // e[1].b: {message: null, type: "base", valid: true}
  // e[1].c: {message: "b不能大于c", type: "combine", valid: false}

示例3：内置合并验证规则

  // lessThan b小于c
  // greaterThan b大于c
  // equal b等于c
  {
    refs: ['b', 'c'],
    valid: {
      valid: 'lessThan',
      message: "开始时间必须小于结束时间"
    }
  }

方法

方法名	说明	参数	返回值
valid	校验方法	data,next:Function,allNext:Function	无
getConfig	获取相关配置	prop	对应数据的校验配置
setConfig	设置相关配置	prop, options	无
validField	校验部分数据	prop,data,next:Function	校验结果
destroy	销毁实例	无	无

valid

  import HeyValidator from "hey-validator"
  let validator = new HeyValidator({
    required: ['b'],
    rules:{
      b: {
        type:'int'
      }
    }
  })
  
  validator.valid({b: 3.3})   // {b: {message: "不是正确的整数格式", type: "base", valid: false}}}
  // next     异步校验只有执行的回调
  // allNext  多个异步校验全部完成之后执行的回调

getConfig

  let HeyValidator = require("hey-validator")
  let validator = new HeyValidator({
    required: ['b'],
    rules:{
        b: {
            type:'int'
        }
    }
  })
  validator.getConfig('b')   // {required: true, type: "int"}

setConfig

  let HeyValidator = require("hey-validator")
  let validator = new HeyValidator({
    required: ['b'],
  })
  let rules = {
    b: {
      type:'int'
    }
  }
  validator.setConfig('b',rules);
  validator.getConfig('b')  // {b: {type: "int"}, required: true}

validField

  let HeyValidator = require("hey-validator")
  let validator = new HeyValidator({
    required: ['b','c'],
    rules:{
      b: {
        type: 'int'
      },
      c: {
        type: 'email'
      }
    }
  })
  validator.validField('b', { b: 3.3 })  // {b: {message: "不是正确的整数格式", type: "base", valid: false}}

destroy

  let HeyValidator = require("hey-validator")
  let validator = new HeyValidator({
    required: ['b','c'],
    rules:{
      b: {
        type: 'int'
      }
    }
  })
  validator.destroy()   //{combineRuleResults: null, combineRules: null, rules: null}

相关链接

• HeyUI