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>

　　

大功告成，起飞

原文地址：https://www.cnblogs.com/hugyfighting/p/14611538.html