vue3 表单自定义校验

Vue3 使用Element-Plus 进行表单自定义校验

html结构
 <el-form-item label="手机号" prop="phoneNumber">
       <el-input v-model="form.phoneNumber" placeholder="此项有自定义校验"></el-input>
 </el-form-item>

自定义校验规则
 const validatePhone = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('手机号不可为空'))
  } else if (value.charAt(0) !== '1') {
    callback(new Error('手机号首位必须为1'))
  } else {
    callback()
  }
}

校验规则
 phoneNumber: [
    {
      required: true,
      message: '请输入手机号',
      trigger: 'blur'
    },
    // { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },  通过正则校验
    {
      validator: validatePhone,
      trigger: 'blur'
    }
  ],

添加正则校验

通过正则直接对手机号进行校验

 phoneNumber: [
   ...,
   
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },  通过正则校验
    .....
  ],