1、自定义校验:validator
在写的自定义校验的方法中,加入callback(), 当不满足条件时,要传入‘错误提示的字符’,例如:callback('手机号为必填')(如果不传,则当输入内容不满足条件时,在表单的校验中不出现错误)
例子:手机号+区号 只能自定义校验
1.1、
<a-form-item v-bind="formItemLayout" label="手机号码" :validate-status="phoneStatus" :help="phoneHelp">
<a-input placeholder="请输入手机号码"
v-decorator="[
'phoneNum',
{
rules: [{ validator:checkPhone,trigger:'blur'}],
},
]"
>
<a-select
slot="addonBefore"
style="width: 70px"
v-decorator="[
'phoneArea',
{
rules: [{validator:checkArea,trigger:'change'}],
},
]"
>
<a-select-option value="+86">
+86
</a-select-option>
<a-select-option value="+852">
+852
</a-select-option>
</a-select>
</a-input>
</a-form-item>
1.2、
phoneStatus: "success" , // 手机号验证结果标志
phoneHelp: '' , // 手机号验证结果文字
1.3、
checkPhone (rule,value,callback) { // 输入手机号验证
let phoneArea = this.form.getFieldValue('phoneArea').substring(1)// 区号
let checkR = this.phoneReg(phoneArea,value)
checkR ? callback() : callback('手机号为必填') //错误时要返回字符串类型
},
checkArea (rule,value,callback) { // 区号选择验证
let phoneNum = this.form.getFieldValue('phoneNum')// 手机号
let areaV = value.substring(1)
let checkR = this.phoneReg(areaV,phoneNum)
checkR ? callback() : callback('区号为必选')
},
phoneReg (areaC, phoneC) {
let localReg = /^(?:\+?86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[0-35-9]\d{2}|4(?:0\d|1[0-2]|9\d))|9[0-35-9]\d{2}|6[2567]\d{2}|4(?:(?:10|4[01])\d{3}|[68]\d{4}|[579]\d{2}))\d{6}$/
let hkReg = /^(852)?(5[1234569]\d{6}|6\d{7}|9[0-8]\d{6})$/ // 香港手机号
if (areaC == '86') {
if (localReg.test(areaC+phoneC)) {
this.phoneStatus = "success"
this.phoneHelp=""
return true
} else {
this.phoneStatus = "error"
this.phoneHelp="请输入正确手机号"
return false
}
} else {
if ( hkReg.test(areaC+phoneC)) {
this.phoneStatus = "success"
this.phoneHelp=""
return true
} else {
this.phoneStatus = "error"
this.phoneHelp="请输入正确手机号"
return false
}
}
},
2、自定义校验:pattern 使用正则方式
<a-input v-decorator="['contacts_number',
{rules:[
{required: true,message:'请输入号码'},
{pattern:new RegExp(/\.$/,'g'),message:'请输入正确号码'}]}]"
/>备注:pattern 写法 1、: pattern: /\.$/ 注意是正则,不是字符串,所以不能加''
写法 2、: pattern:new RegExp(/\.$/,'g')
版权声明:本文为Hua_explore原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。