In Element-plus + ts, the verification form uses custom validation rules

For example, verify mobile phone number:

  Step 1: Write custom validation rules

// 验证手机号
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('请输入正确的手机号'))
}

 Step 2: Under the configuration items of the verification form

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

Finish! ! !

But some big guys will have the following situation:

 Why is the first parameter (rule) reporting an error? ? ?

But if you are smart, you will still find that you can still verify correctly and the code can run normally.

It turns out that it was the fault of ts. ts told us that it was declared but its value was not read, that is, this parameter was declared but not used.

 How to solve it? ? ?

      Just go to ts.config.json and set these three items to false or comment.

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