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