Element UI 表单联动校验：el-form-item 中如何实现密码确认校验

在 Element UI 的 el-form-item 中，可以通过设置 prop 属性来指定需要联动校验的表单项。prop 属性的值应与 el-form 中的 model 中的属性名一致。

例如，有两个表单项需要联动校验，一个是输入密码的表单项，另一个是确认密码的表单项。可以设置两个 el-form-item，分别设置 prop 属性为'password'和'confirmPassword'。然后在 el-form-item 中使用 rules 属性来设置校验规则。

示例代码如下：

<el-form :model="formData" :rules="rules">
  <el-form-item label="密码" prop="password">
    <el-input v-model="formData.password" type="password"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="confirmPassword">
    <el-input v-model="formData.confirmPassword" type="password"></el-input>
  </el-form-item>
</el-form>

data() {
  return {
    formData: {
      password: '',
      confirmPassword: ''
    },
    rules: {
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
      ],
      confirmPassword: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        { validator: this.validateConfirmPassword, trigger: 'blur' }
      ]
    }
  }
},
methods: {
  validateConfirmPassword(rule, value, callback) {
    if (value !== this.formData.password) {
      callback(new Error('两次输入密码不一致'));
    } else {
      callback();
    }
  }
}

在上面的代码中，rules 对象中的 password 和 confirmPassword 属性分别对应 el-form-item 中的 prop 属性。其中，confirmPassword 属性的校验规则中使用了自定义的校验函数 validateConfirmPassword。该函数会在 blur 事件触发时进行校验，如果两次输入的密码不一致，则会返回一个包含错误信息的 Error 对象，否则返回 undefined。

这样，当用户输入密码后，再输入确认密码时，如果两次输入的密码不一致，会显示错误提示信息。