注册全局form表单验证工具包-蒲公英云

注册全局form表单验证工具包

Myth丶恋晨 2021-07-25 20:59 488阅读 0赞

1、js注册文件

let regId = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; //机构
let email = /^(\w+\.?)*\w+@(?:\w+\.)\w+$/; //邮箱
let tel = /^1(3|4|5|7|8|9)\d{9}$/; //手机号码
// let tel = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/; // 手机号 + 座机号
let fax = /^(\d{3,4}-)?\d{7,8}$/; //传真
let name = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,10}$/; //姓名
let pass1 = /^[0-9]{6,20}$/; // 6-20 位数字密码
let answer = /^[A-G]{0,1}$/; // 答案(A - G)
let idCard = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/; //身份证号
let percent = /^([1]?\d{ 1,2})$/ // 百分比(0-100的正整数,包含0,100)
let FormValidate = (function() { 
  // eslint-disable-next-line
  function FormValidate() { }
  // From表单验证规则 可用于公用的校验部分
  FormValidate.Form = function() { 
    return { 
      // 姓名的验证规则
      Name: function(rule, value, callback) { 
        if (!value) { 
          return callback(new Error('姓名不能为空！'))
        }
        if (!name.test(value)) { 
          callback(new Error('请输入正确姓名!'))
        } else { 
          callback()
        }
      },
      // 邮箱的正则
      Email: function(rule, value, callback) { 
        if (!value) { 
          return callback(new Error('邮箱不能为空'))
        }
        if (!email.test(value)) { 
          callback(new Error('请输入正确的邮箱!'))
        } else { 
          callback()
        }
      },
      // 身份证的验证规则
      ID: function(rule, value, callback) { 
        if (!value) { 
          return callback(new Error('身份证不能为空'))
        }
        if (!regId.test(value)) { 
          callback(new Error('请输入正确的二代身份证号码'))
        } else { 
          callback()
        }
      },
      // 电话号码的验证
      Tel: (rule, value, callback) => { 
        if (!value) { 
          return callback(new Error('联系电话不能为空！'))
        }
        if (!tel.test(value)) { 
          callback(new Error('手机号码有误，请重新填写！'))
        } else { 
          callback()
        }
      },
      // 输入密码验证
      Checkpass: (rule, value, callback) => { 
        if (!value) { 
          return callback(new Error('请输入正确的登录密码！'))
        }
        if (!pass1.test(value)) { 
          callback(new Error('请输入长度为 6 ~ 20 位的登录密码！'))
        } else { 
          callback()
        }
      },
      // 答案选项
      Answer: (rule, value, callback) => { 
        if (!value) { 
          return callback(new Error('答案不能为空！'))
        }
        if (!answer.test(value)) { 
          callback(new Error('请输入A-G 格式的选项！'))
        } else { 
          callback()
        }
      },
      // 身份证号码验证
      IdCard: (rule, value, callback) => { 
        if (!value) { 
          return callback(new Error('身份证号码不能为空！'))
        }
        if (!idCard.test(value)) { 
          callback(new Error('请输入正确格式的身份证号码！'))
        } else { 
          callback()
        }
      },
      // 0-100整数 百分比
      Percent: (rule, value, callback) => { 
        if (!value) { 
          return callback(new Error('请输入正确格式的百分比'))
        }
        if (!percent.test(value)) { 
          callback(new Error('请输入0-100的正整数百分比'))
        } else { 
          callback()
        }
      },
    }
  }
  // FromOne表单验证规则 用于FromOne个性化的校验
  FormValidate.FormOne = function() { 
    return { 
      // 姓名的验证规则
      Name: function(rule, value, callback) { 
        if (!value) { 
          return callback(new Error('姓名不能为空'))
        }
        if (!name.test(value)) { 
          callback(new Error('请输入正确姓名!'))
        } else { 
          callback()
        }
      }
    }
  }
  return FormValidate
}())
exports.FormValidate = FormValidate

2、入口文件注册（main.js）

...
// 全局表单验证
import fromCommon from "./util/fromCommon.js"
Vue.prototype.$fromCommon = fromCommon; //from 全局验证
...

3、表单使用

addRules: { 
   tciCardNum: [{ 
      required: true,
      message: '请输入身份证号',
      validator: this.$fromCommon.FormValidate.Form().IdCaard,
      trigger: 'blur'
   }]
}