elementUI-根据证件类型验证证件号格式、验证电话号码和邮箱格式但非必填、验证网址

时间：2024-03-12 07:27:33
  data() {
    let checkIDCard = (rule, value, callback) => {
      const IDCardReg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/
      if (value) {
        if (IDCardReg.test(value)) {
          callback()
        } else {
          callback(new Error(\'身份证号格式不正确\'))
        }
      } else {
        callback(new Error(\'请输入身份证号\'))
      }
    }
    let checkHKCard = (rule, value, callback) => {
      /**
       * 规则： H/M + 10位或6位数字
       * 样本： H1234567890
       */
      const HKCardReg = /^([A-Z]\d{6,10}(\(\w{1}\))?)$/
      if (value) {
        if (HKCardReg.test(value)) {
          callback()
        } else {
          callback(new Error(\'港澳通行证号格式不正确\'))
        }
      } else {
        callback(new Error(\'请输入港澳通行证号\'))
      }
    }
    let checkTWCard = (rule, value, callback) => {
      /**
       * 规则： 新版8位或18位数字， 旧版10位数字 + 英文字母
       * 样本： 12345678 或 1234567890B
       */
      const TWCardReg = /^\d{8}|^[a-zA-Z0-9]{10}|^\d{18}$/
      if (value) {
        if (TWCardReg.test(value)) {
          callback()
        } else {
          callback(new Error(\'*通行证号格式不正确\'))
        }
      } else {
        callback(new Error(\'请输入*通行证号\'))
      }
    }
    let checkPassport = (rule, value, callback) => {
      /**
       * 规则： 新版8位或18位数字， 旧版10位数字 + 英文字母
       * 样本： 12345678 或 1234567890B
       */
      const passportReg = /^\d{8}|^[a-zA-Z0-9]{10}|^\d{18}$/
      if (value) {
        if (passportReg.test(value)) {
          callback()
        } else {
          callback(new Error(\'护照号码格式不正确\'))
        }
      } else {
        callback(new Error(\'请输入护照号码\'))
      }
    }
    let checkPhone = (rule, value, callback) => {
      const phoneReg = /(^1([3|4|5|7|8|])\d{9}$)|(^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$)/
      if (value) {
        if (phoneReg.test(value)) {
          callback()
        } else {
          callback(new Error(\'联系电话格式不正确\'))
        }
      } else {
        callback()
      }
    }
    let checkEmail = (rule, value, callback) => {
      const mailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
      if (value) {
        if (mailReg.test(value)) {
          callback()
        } else {
          callback(new Error(\'请输入正确的邮箱格式\'))
        }
      } else {
        callback()
      }
    }
    return {
      checkIDCard: checkIDCard,
      checkHKCard: checkHKCard,
      checkTWCard: checkTWCard,
      checkPassport: checkPassport,
      ruleForm: {
        certificateType: \'\', // 证件类型
        certificateNumber: \'\', // 证件号
        tel: \'\', // 电话
        email: \'\' // 联系邮箱
      },
      // 验证规则
      rules: {
        certificateType: [{ required: true, message: \'请选择证件类型\', trigger: \'change\' }],
        certificateNumber: [{ required: true, message: \'请先选择证件类型\', trigger: \'change\' }],
        tel: [{ validator: checkPhone, trigger: \'change\' }],
        email: [{ validator: checkEmail, trigger: \'change\' }]
      }
    }
  methods: {
    // 切换证件类型，验证身份证、港澳通行证、*通行证、护照
    handleCardChange() {
      if (this.ruleForm.certificateType == 1) {
        this.rules.certificateNumber = [{ required: true, validator: this.checkIDCard, trigger: \'change\' }]
      } else if (this.ruleForm.certificateType == 2) {
        this.rules.certificateNumber = [{ required: true, validator: this.checkHKCard, trigger: \'change\' }]
      } else if (this.ruleForm.certificateType == 3) {
        this.rules.certificateNumber = [{ required: true, validator: this.checkTWCard, trigger: \'change\' }]
      } else if (this.ruleForm.certificateType == 4) {
        this.rules.certificateNumber = [{ required: true, validator: this.checkPassport, trigger: \'change\' }]
      } else {
        this.rules.certificateNumber = [{ required: true, message: \'请先选择证件类型\', trigger: \'change\' }]
      }
    }
　}

 

验证url：

    let strUrl =
      \'^((https|http|ftp|rtsp|mms)?://)\' +
      "?(([0-9a-z_!~*\'().&=+$%-]+: )?[0-9a-z_!~*\'().&=+$%-]+@)?" + //ftp的user@
      \'(([0-9]{1,3}.){3}[0-9]{1,3}\' + // IP形式的URL- 199.194.52.184
      \'|\' + // 允许IP和DOMAIN（域名）
      "([0-9a-z_!~*\'()-]+.)*" + // 域名- www.
      \'([0-9a-z][0-9a-z-]{0,61})?[0-9a-z].\' + // 二级域名
      \'[a-z]{2,6})\' + // first level domain- .com or .museum
      \'(:[0-9]{1,4})?\' + // 端口- :80
      \'((/?)|\' + // a slash isn\'t required if there is no file name
      "(/[0-9a-z_!~*\'().;?:@&=+$,%#-]+)+/?)$"
    let checkUrl = (rule, value, callback) => {
      const urlReg = new RegExp(strUrl)
      if (value) {
        if (urlReg.test(value)) {
          callback()
        } else {
          callback(new Error(\'请输入正确的url格式\'))
        }
      } else {
        callback()
      }
    }
      rules: {
        authenticityQuery: [
          { required: true, message: \'请输入网址\', trigger: \'blur\' },
          { validator: checkUrl, trigger: \'change\' }
        ]
      }

 

相关文章