Element-ui 表单校验二次封装

说明

1. 本封装仅仅是将一些校验规则进行循环使用，避免多次重复书写而封装的
2. 若有更好用的封装请各位大佬艾特我，我必紧紧跟随学习，追随大佬的脚步
3. 若有更好的思路请留言，感谢

Params

传递参数如下：

Demo

// customDemo：
 {
    custom:async function (rule,value,callback) {
      let data = {stageCode:value};
      const res = await linkConfig.validateCode(data);
      if(res.success){
        callback()
      }else{
        callback(new Error(res.msg))
      }
    }
  }

以下为封装代码：

/**
 * Created by JiMan on 19/12/30.
 */

/**
 * data参数Objeck/Array
 *   required:是否必传    默认为false                                                         string
 *   trigger:触发事件     默认为blur                                                          string
 *   msg：错误提示信息     默认为空                                                             string
 *   vali：配置的规则名称  默认为值为空的规则                                                     string
 *   ruleName: data为数组时传入，值为匹配的input框的prop名称                                      string
 *   custom: 自定义私有校验规则，类型为function，需添加三个默认参数（rule,value,callback），非必传
 *           需要注意的是此处的this指向会有问题                                                  function
 *
 *   customDemo：
 *        {
            custom:async function (rule,value,callback) {
              let data = {stageCode:value};
              const res = await linkConfig.validateCode(data);
              if(res.success){
                callback()
              }else{
                callback(new Error(res.msg))
              }
            }
          }
 */
const regRules={
  email: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/,
  idCardNumber:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
  phoneNumber:/^1[3456789]\d{9}$/,
  isPositInt:/^[0-9]$/,
  chinese:/^[\u4e00-\u9fa5]+$/,
  number:/^[0-9]+$/,
}
export function elValidate(data) {
  class FormValidate {
    constructor(json) {
      if (json instanceof Array) {
        this.rules = {}
        for (let k in json) {
          let isHasCustom = Boolean(json[k].custom&&((typeof json[k].custom)=='function'))
          isHasCustom?json[k].vali = 'customFunction':(json[k].vali = json[k].vali ? json[k].vali : 'isNull');
          this.rules[json[k]['ruleName']] = [{
            type: json[k]['type'] || 'string',
            required: json[k]['required'] || false,
            trigger: json[k]['trigger'] || 'blur',
            validator: json[k].custom?this.elValidateRules(json[k].msg,json[k].custom)[json[k].vali]:this.elValidateRules(json[k].msg)[json[k].vali]
          }]
        }
      } else if (json instanceof Object) {
        let isHasCustom = Boolean(json.custom&&((typeof json.custom)=='function'))
        isHasCustom?json.vali = 'customFunction':(json.vali = json.vali ? json.vali : 'isNull');
        this.rules = {
          type: json.type || 'string',
          required: json.required || false, // 是否必填
          trigger: json.trigger || 'blur', // 事件名
          validator: json.custom?this.elValidateRules(json.msg,json.custom)[json.vali]:this.elValidateRules(json.msg)[json.vali]
        }
      }
    }
    elValidateRules(msg,cb) {
      msg = msg ? msg : "";
      return {
        // 非空
        isNull:(rule, value, callback) => {
          if(value instanceof Array&&!value.length){
            callback(new Error(`${msg}不能为空`));
          }else if (!value) {
            callback(new Error(`${msg}不能为空`));
          } else {
            callback();
          }
        },
        // 身份证号
        isIdNumber:(rule,value,callback) =>{
          if(value == ''||!value){
            callback(new Error(`身份证号不能为空`))
          }else if(regRules.idCardNumber.test(value)){
            callback()
          }else{
            callback(new Error(`请输入正确的身份证号`))
          }
        },
        // 中文
        isChinese:(rule,value,callback)=>{
          if(value == ''||!value){
            callback(new Error(`${msg}不能为空`))
          }else if(regRules.chinese.test(value)){
            callback()
          }else{
            callback(new Error(`请输入正确的${msg}`))
          }
        },
        // 手机号码
        isPhoneNumber:(rule,value,callback)=>{
          if(value == ''||!value){
            callback(new Error(`手机号不能为空`))
          }else if(regRules.phoneNumber.test(value)){
            callback()
          }else{
            callback(new Error(`请输入正确的手机号`))
          }
        },
        // 数字
        isNumber:(rule,value,callback)=>{
          if(value === ''||!value){
            callback(new Error(`${msg}不能为空`))
          }else if(regRules.number.test(value)){
            callback()
          }else{
            callback(new Error(`请输入正确的${msg}`))
          }
        },
        // 正整数
        isPositiveInt:(rule,value,callback)=>{
          console.log(value,value-0>=0)
          if(value === '' || typeof (value-0) !== "number"){
            callback(new Error(`${msg}不能为空`))
          }else if(value-0>=0&&value%1==0){
            callback()
          }else{
            callback(new Error(`请输入正确的${msg}`))
          }
        },
        // 邮箱
        email:(rule,value,callback)=>{
          let flag = regRules.email.test(value);
          if(flag){
            callback()
          }else{
            callback(new Error(`请输入正确的邮箱`))
          }
        },
        // 自定义校验
        customFunction: (rule,value,callback) =>{
          cb?cb(rule,value,callback):callback(new Error(`请输入正确的${msg}`));
        }
      }
    }
  }
  return new FormValidate(data).rules
}

调用Demo

new elValidate([
	{
		ruleName: "name",
		vali: "isNull",
		msg: "该项"，
		required: true,
		trigger: "change"
	}
])