el-input要么为空要么验证格式

需求描述：手机号非必填，但是有输入的时候验证格式。

<el-form ref="form" :rules="rules" :model="form">
  <el-form-item label="手机号" prop="mobile">
    <el-input v-model="form.mobile" @input="inputMobile" clearable></el-input>
  </el-form-item>
</el-form>

let regMobile = /^1\d{10}$/
let validatorMobile = (rule, value, callback) => {
  if (!value) {
    callback()  // 空值通过
  } else if (regMobile.test(value)) {
    callback()
  } else {
    callback(new Error('手机号格式错误'))
  }
}

form:{
  mobile:''
},
rules:{
  mobile: [{ validator: validatorMobile,required: false, message: '手机号格式错误',trigger: 'blur' }]
}

输入框为空时候清除掉验证信息

inputMobile(val){
  if (!val) {
    this.$refs['form'].clearValidate(['mobile'])
  }
}

备注：validator和required共存，虽然required为false，但是依然触发验证，说明validator的优先级高，这里的required为false主要目的为隐藏验证的红色星号。

其它思路：本来想的required设置为true，然后隐藏红色星号，正则中判断验证规则，隐藏星号虽然css可以实现但是确实不太地道，想起来有个属性hide-required-asterisk但是是设置在el-form上的，而且这个属性会隐藏所有的星号无法针对某一项设置。