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

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

        ]

      }