image.png
1.视图
联动下拉，清除验证 resetFields ，validateFields
<a-form-item label="手机号码">
<a-row :gutter="10">
<a-col :span="10">
<a-select
size="large"
:disabled="isEdit"
:value="countryCode"
:options="optionsCountryCode"
@select="selectCode"
></a-select>
</a-col>
<a-col :span="14">
<a-input
placeholder="手机号码，用于登录"
:disabled="isEdit"
size="large"
v-decorator="[
'mobile',
{
rules: [
{
required: true,
message: '请输入手机号码',
whitespace: true,
},
{ validator: phoneCheck.bind(this) },
],
},
]"
/>
</a-col>
</a-row>
</a-form-item>
方法-手机号校验
data() {
return {
addForm: this.$form.createForm(this),
};
},
methods: {
// 下拉选择
selectCode(val){
this.countryCode=val
if(val!=86){
//重置
this.addForm.resetFields(['mobile']);
}else{
//启用
this.addForm.validateFields(['mobile'])
}
},
//手机号校验
phoneCheck(rule, value, callbackFn) {
if(this.countryCode==86 && !this.isEdit){
const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
if (!reg.test(value) && value) {
callbackFn("请输入正确的手机号码");
return;
}
}
callbackFn();
},
