Element-plus + ts中,验证表单使用自定义校验规则

例如验证手机号:

  第一步:写自定义校验规则

// 验证手机号
var checkMobile = (rule: any, value: any, callback: any) => {
    const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
    if (regMobile.test(value)) {
        return callback()
    }
    return callback(new Error('请输入正确的手机号'))
}

 第二步:在验证表单的配置项下面

let rules = reactive<FormRules>({
    phone: [
            { required: true, message: '请填写手机号', trigger: 'blur' }, 
            { validator: checkMobile, trigger: 'blur' }
          ]

完成!!!

但是有些大佬会出现以下这种情况

 怎么第一个参数(rule)报错了 ???

但是聪明的你依然会发现还能正确验证,代码也能正常跑起来

原来是 ts 搞的鬼,ts告诉我们 声明了但未读取其值, 也就是 这个参数声明了但没有使用

 如何解决呢???

      只需要到  ts.config.json 中 将这三项设置为 false 或者 注释 即可

 "strict": false,
 "noUnusedLocals": false,
 "noUnusedParameters": false,

猜你喜欢

转载自blog.csdn.net/weixin_59739381/article/details/132118563