Element-ui 校验同一表单不同字段是否合理

需求：两次密码不一致时，提示用户

---

## Html部分

<template>
  <div id="app">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>登录</span>
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="medium">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password2">
          <el-input type="password" v-model="ruleForm.password2"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-row>
            <el-col :span="8"><el-input v-model="ruleForm.code" size="small"></el-input></el-col>
            <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple"><el-image src=""></el-image></div></el-col>
          </el-row>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button style="float: right" @click="$router.push('/login')">去登录</el-button>
        </el-form-item>

      </el-form>
    </el-card>
  </div>
</template>

功能实现

confirmPassword方法必须定义在retuen方法之前

data(){
    const confirmPassword = (rule,value,callback)=>{
      if (this.ruleForm.password !== this.ruleForm.password2){
        callback(new Error('两次密码不一致'))
      }else {
        //一定要写上这句，否则点击事件无效
        callback();
      }
    }
    return{
      ruleForm:{
        username:'',
        password2:'',
        phone: '',
        code:''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        password2: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { validator: confirmPassword, trigger: 'change' }
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '验证码', trigger: 'blur' },
          { min: 4,max: 4,message: "请输入4位验证码",trigger: "blur"}
        ],
      }
    }
 })

测试：

element-ui form表单rules验证 同一个表单不同的两个字段之间的相互验证

后端返回错误，对应输入框校验不通过

如：后端返回验证码校验不通过，前端验证码输入框变红
注意：$refs[‘ruleForm’] 中的ruleForm 是表单绑定的属性

this.$refs['ruleForm'].validateField('code');