vue3 如何给表单添加表单效验+正则表达式

校验要求
我们的表单中有密码、电话号码 ，两项。

我们设置用密码为3到20位的非空字符

电话号码就用目前用的电话号码正则表达式，要求手机号码以 1 开头，第二位为 3 到 9 之间的数字，后面跟着任意 9 个数字，总共是 11 位数字。

<el-form-item label="手机号" prop="tel">
                    <el-input v-model="ruleForm.tel" :rules="rules" />
                </el-form-item>
                <el-form-item label="密码" prop="cipher">
                    <el-input v-model="ruleForm.cipher" :rules="rules" />
                </el-form-item>

 做类型声明：

interface RuleForm {
    tel: string
    cipher: string
}

然后对页面数据进行绑定：

const rules = reactive<FormRules<RuleForm>>({
    tel: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        {
            validator: checkEmail,
            trigger: 'blur'
        },
    ],
    cipher: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        {
            min: 3,
            max: 20,
            message: '密码为3~20位非空字符',
            trigger: 'blur'
        },
        {
            validator: checkUserName,
            trigger: 'blur'
        },
    ],
})

正则表达式：

//定义手机号校验规则
const checkEmail = (_rule: any, value: string, callback: (arg0: Error | undefined) => void) => {
    const regEmail = /^1[3-9]\d{9}$/;
    if (value === '') {
        callback(new Error("输入不能为空"))
    } else if (regEmail.test(value)) {
        return callback();
    }
    callback(new Error("请输入正确手机号"));
}
//密码效验规则
const checkUserName = (_rule: any, value: string, callback: (arg0: Error | undefined) => void) => {
    if (value.trim() === '') {
        callback(new Error("密码不可为空"))
    } else {
        return callback();
    }
}