elementUi form表單 驗證表單的一部分規則

場景：做修改密碼的時候，已對表單手機號、驗證碼、新密碼做過整體檢驗規則，當點擊發送驗證碼的時候，我只需要校驗規則中的手機規則。查看官方文檔發現 validateField ，官方給它的定義是：對部分表單字段檢驗的方法。

示例代碼如下

<template>
  <div class="user-container">
    <div v-loading="loading" class="user-content">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="手機號" prop="checkPhone">
          <el-input v-model.number="ruleForm.checkPhone"></el-input>
        </el-form-item>
        <el-form-item label="驗證碼" prop="account">
          <el-input
            class="codeInput"
            type="text"
            v-model="ruleForm.account"
            autocomplete="off"
          ></el-input>
          <el-button
            class="getCode"
            @click="getCode"
            :disabled="codeBtnDisable"
            >{{ codeBtnText }}</el-button
          >
        </el-form-item>
        <el-form-item label="新密碼" prop="checkPass">
          <el-input
            type="text"
            v-model="ruleForm.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >確認</el-button
          >
          <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手機號不能為空"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("請輸入正確的手機號"));
        }
      }
    };
    var account = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("請輸入驗證碼"));
      } else {
        callback();
      }
    };
    var checkPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("請輸入密碼"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      ruleForm: {
        account: "",
        checkPass: "",
        checkPhone: ""
      },
      rules: {
        account: [{ validator: account, trigger: "blur" }],
        checkPass: [{ validator: checkPass, trigger: "blur" }],
        checkPhone: [{ validator: checkPhone, trigger: "blur" }]
      },
      codeBtnText: "獲取驗證碼",
      codeCountDown_maxNum: 60, // 驗證碼倒計時
      codeCountDown_count: 0,
      codeBtnDisable: false
    };
  },
  methods: {
    handleCancel() {
      this.$router.go(-1);
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.ruleForm);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getCode() {
 const phoneStatus = this.$refs["ruleForm"].validateField( "checkPhone", checkPhoneError => { if (!checkPhoneError) { console.log("單獨對手機校驗成功,可以發請求"); } else { console.log("手機驗證失敗"); return false; } } );
    }
  }
};
</script>

　　

大功告成，起飛