我们在HarmonyOS开发中，实现表单验证？

Question

我们在HarmonyOS开发中，实现表单验证？
本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

表单验证通常涉及到状态管理和事件处理。

@Entry
@Component
struct Index {
  @State username: string = '';
  @State password: string = '';
  @State errorMessage: string = '';

  validateForm() {
    if (this.username.length < 3 || this.password.length < 6) {
      this.errorMessage = 'Username must be at least 3 characters, password must be at least 6 characters.';
      return false;
    }
    this.errorMessage = '';
    return true;
  }

  build() {
    return (
      <UI.Page>
        <UI.TextField
          placeholder="Username"
          value={this.username}
          onValueChanged={(value) => this.username = value}
        />
        <UI.TextField
          placeholder="Password"
          value={this.password}
          onValueChanged={(value) => this.password = value}
          type="password"
        />
        <UI.Label text={this.errorMessage} style={{ color: 'red' }} />
        <UI.Button
          text="Submit"
          onClick={() => {
            if (this.validateForm()) {
              console.log('Form submitted!');
            }
          }}
        />
      </UI.Page>
    );
  }
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。