el-form里根据不同条件调用不同校验

问题：遇到一个需要，表单里手机号需要根据角色权限调用不同的校验，role为0的时候，手机号必填，且需要手机号正则校验，role不为0时，手机号不必填，但如果填了，就需要校验是否符合手机号规则

我一开始只是写的:prop="propsFormData.role === 0 ? 'phone' : ''"
但是写完发现不对，role不为0的时候，没有校验填了有没有符合手机号规则

然后使用自定义校验
 

<el-form-item :label="$t('电话')" prop="phone">
    <el-input v-model="propsFormData.phone" :placeholder="$t('请输入')" clearable />
</el-form-item>

const validatePhone = (rule, value, callback) => {
    const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
    if (propsFormData.value.role === 0) {
        if (!value) {
            callback(new Error(t('请输入')));
        } else if (reg.test(value)) {
            callback();
        } else {
            callback(new Error(t('请输入正确的手机号码')));
        }
    } else {
        if (value && !reg.test(value)) {
            callback(new Error(t('请输入正确的手机号码')));
        } else {
            callback();
        }
    }
}
const rules = reactive({
        phone: [
            { validator: validatePhone, trigger: 'blur' }
        ],
})

经检测，虽然逻辑符合了，但是当role为0的时候，没有显示必填的那个星号。

好吧，我看到星号，就想到required属性，认为在el-form-item里加上这个属性就好了。

<el-form-item :label="$t('电话')" prop="phone" :required="propsFormData.role === 0">
     <el-input v-model="propsFormData.phone" :placeholder="$t('请输入')" clearable />
</el-form-item>

正以为解决，验证的时候，出现这种情况
当我输入框清空时，先出现了这个

然后鼠标不聚焦在输入框，点击其它区域，才显示请输入

这就有点问题了，写在el-form-item上的required属性，会自带这种校验提示，但我不要它自带的提示
所以还是得写在rules里面。
最终写法
 

<el-form-item :label="$t('电话')" prop="phone">
    <el-input v-model="propsFormData.phone" :placeholder="$t('请输入')" clearable />
</el-form-item>

const validatePhone = (rule, value, callback) => {
    const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
    if (propsFormData.value.role === 0) {
        if (!value) {
            callback(new Error(t('请输入')));
        } else if (reg.test(value)) {
            callback();
        } else {
            callback(new Error(t('请输入正确的手机号码')));
        }
    } else {
        if (value && !reg.test(value)) {
            callback(new Error(t('请输入正确的手机号码')));
        } else {
            callback();
        }
    }
}
const rules = computed(() => {
    return {
        phone: [
            { required: propsFormData.value.role === 0, validator: validatePhone, trigger: 'blur' }
        ],
    }
})

哈哈，经检测没问题，大功告成