ant design vue 中FormModel 自定义正则校验方法

悠悠 2022-12-07 11:51 707阅读 0赞

方法一：

<a-form-model
            ref="ruleForm"
            :model="form"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-model-item ref="name" label="姓名" prop="name">
              <a-input v-model="form.name" />
            </a-form-model-item>
            <a-form-model-item ref="phone" label="手机号" prop="phone">
              <a-input v-model="form.phone" />
            </a-form-model-item>
          </a-form-model>

data () {
         // 手机格式验证
        const validatorPhone = (rule, value, callback) => {
          if (!value) {
            callback(new Error('请输入手机号!'))
          } else {
            if (!/^1[3456789]\d{9}$/.test(value)) {
              callback(new Error('手机号格式不正确!'))
            } else {
              callback()
            }
          }
        }
        return {
        form: {
            name: '',
            phone: ''
          },
           rules: {
            name: [
              { required: true, message: '请输入姓名', trigger: 'blur' }
            ],
            phone: [{ required: true, validator: validatorPhone, trigger: 'blur' }]
          }
    
       }

方法二：

<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
        <a-form-item label="手机号">
          <a-input
            v-decorator="['phone', { rules: [{ required: true, message: '请输入手机号!' },
            { validator: validatorPhone}
          ] }]"
          />
        </a-form-item>
    </a-form>

在methods写上自定义校验方法：

validatorPhone(rule, value, callback){
          if (!value) {
            callback(new Error('请输入手机号!'))
          } else {
            if (!/^1[3456789]\d{9}$/.test(value)) {
              callback(new Error('手机号格式不正确!'))
            } else {
              callback()
            }
          }
        }