Stencil：点击父组件按钮时如何获取子组件表单校验状态

核心思路 #

通过父组件获取子组件实例，调用子组件公开的校验方法，仅在提交触发时获取实时校验结果，无需监听子组件的change事件。

实现步骤 #

1. 子组件：封装表单并公开校验方法

在子组件中实现表单逻辑，同时对外暴露一个validate()方法，该方法返回布尔值（校验通过/失败）或具体错误信息：

import { Component, h } from '@stencil/core';

@Component({
  tag: 'my-form',
  shadow: true,
})
export class MyForm {
  private formEl: HTMLFormElement;

  // 公开校验方法，返回校验结果
  validate(): boolean | string {
    // 先执行原生表单校验
    if (!this.formEl.checkValidity()) {
      this.formEl.reportValidity(); // 触发浏览器默认校验提示（可选）
      return '必填字段未填写或格式错误';
    }

    // 自定义校验逻辑（示例：密码长度校验）
    const passwordInput = this.formEl.querySelector('input[type="password"]');
    if (passwordInput?.value.length < 6) {
      return '密码长度不能少于6位';
    }

    return true;
  }

  render() {
    return (
      <form ref={(el) => this.formEl = el as HTMLFormElement}>
        <div>
          <label>邮箱:</label>
          <input type="email" required />
        </div>
        <div>
          <label>密码:</label>
          <input type="password" required />
        </div>
      </form>
    );
  }
}

2. 父组件：获取子组件实例并调用校验方法

父组件通过ref获取子组件的实例，在提交按钮的点击事件中调用子组件的validate()方法，根据结果处理后续逻辑：

import { Component, h } from '@stencil/core';

@Component({
  tag: 'parent-component',
  shadow: true,
})
export class ParentComponent {
  private formComponent: HTMLMyFormElement;

  handleSubmit() {
    if (!this.formComponent) return;

    const validationResult = this.formComponent.validate();
    if (validationResult === true) {
      // 校验通过，执行提交逻辑
      console.log('表单校验通过，开始提交数据');
      // 如需获取表单数据，可让子组件再公开getFormData()方法
    } else {
      // 校验失败，处理错误信息
      console.error('校验失败:', validationResult);
    }
  }

  render() {
    return (
      <div>
        <my-form ref={(el) => this.formComponent = el as HTMLMyFormElement}></my-form>
        <button onClick={this.handleSubmit.bind(this)}>提交</button>
      </div>
    );
  }
}

补充说明 #

• 子组件的校验逻辑完全封装在内部，父组件无需关心具体校验规则，只需要调用方法获取结果。
• 如果需要获取表单数据，可在子组件中新增getFormData()方法，返回整理后的表单键值对，父组件在校验通过后调用即可。
• 原生的checkValidity()和reportValidity()方法可以快速实现基础校验，也可以完全替换为自定义校验逻辑。

内容的提问来源于stack exchange，提问作者peti Nono