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

方法一: 

 <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()
        }
      }
    }

猜你喜欢

转载自blog.csdn.net/asteriaV/article/details/108600362
今日推荐