try catch 小技巧

在封装input 组件时，遇到需要自定义验证的问题，利用 callback 和 try catch 解决

使用

    <Text
        v-model="form.id_number"
        label="身份证号码"
        placeholder="请输入您的身份证号码"
        :config="{ max: 18, leftText: '取消', rightText: '确认', rule: idRule }"
      />


// 身份证验证

const idRule = (val, callback) => {
  const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
  if (!reg.test(val) && val !== '') {
    callback(new Error('请输入正确的身份证号码 '))  // 传入回调
  } else {
    callback(val)
  }
}

组件代码

• 利用报错后下之后代码不执行

const handleConfirm = (val) => {
  const ruleFn = props.config?.rule
  if (!ruleFn) {
    emit('update:modelValue', val)
    return true
  }

  const callback = (val) => {
    try {
      if (Object.prototype.toString.call(val) == '[object Error]') { // 传入了验证规则 
        throw new Error('error')
      }
      emit('update:modelValue', val)
    } catch (error) {
    }
  }
  ruleFn(val, callback)
  return true
}