Element UI: 在嵌套的 el-input 组件上调用 el-form 的表单校验

<p>在嵌套的 el-input 组件上调用定义在 el-form 上的表单校验，需要使用 <code>$parent</code> 属性来获取其父组件 el-form 的实例，然后调用其 <code>validate</code> 方法。</p>
<p>例如，在以下示例中，我们在一个 el-form 组件中嵌套了两个 el-input 组件，其中一个 el-input 组件需要使用父组件 el-form 上定义的表单校验：</p>
<pre><code class="html"><template>
  <el-form ref="form" :model="form" :rules="rules">
    <el-row>
      <el-col :span="12">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input v-model="form.confirmPassword" :rules="rules.confirmPassword"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
        confirmPassword: ''
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        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.form.password) {
        callback(new Error('两次输入的密码不一致'));
      } else {
        callback();
      }
    }
  }
};
</script></code></pre>
<p>在上述代码中，我们在 el-input 组件中使用了 <code>:rules</code> 属性来绑定父组件 el-form 上定义的表单校验规则，这样可以使该 el-input 组件在表单校验时也进行校验。</p>
<p>在父组件 el-form 的模板中，我们定义了一个 el-input 组件，它需要进行自定义的表单校验。这里我们使用了 <code>validator</code> 属性来指定一个自定义校验函数 <code>validateConfirmPassword</code>，并将其绑定到 <code>rules.confirmPassword</code> 中。</p>
<p>在自定义校验函数 <code>validateConfirmPassword</code> 中，我们使用 <code>this.form.password</code> 来获取表单中的密码字段值，并将其与确认密码进行比较。如果两者不一致，则使用 <code>callback</code> 方法返回一个错误信息。</p>
<p>当用户提交表单时，我们可以调用父组件 el-form 实例的 <code>validate</code> 方法来进行表单校验。此时，el-form 组件会自动对所有子组件（包括嵌套的 el-input 组件）进行校验，并返回校验结果。</p>
<pre><code class="javascript">this.$refs.form.validate(valid => {
  if (valid) {
    // 表单校验通过
  } else {
    // 表单校验失败
  }
});</code></pre>
<p>通过这种方式，我们可以方便地在嵌套的 el-input 组件上调用 el-form 的表单校验功能，从而实现更灵活、更强大的表单验证。</p>