ant design vue 中FormModel 自定义正则校验方法
方法一:<a-form-modelref="ruleForm":model="form":rules="rules":label-col="labelCol":wrapper-col="wrapperCol"><a-form-model-item ref="name" label="姓名" prop="name"><a-inp.
·
方法一:
<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()
}
}
}
更多推荐
已为社区贡献19条内容
所有评论(0)