鸿蒙ArkTS应用中，遇到“Form validation error”表单验证错误，应如何正确实现表单验证？

Question

鸿蒙ArkTS应用中，遇到“Form validation error”表单验证错误，应如何正确实现表单验证？
本文参与了【 HarmonyOS NEXT 技术问答冲榜，等你来战！】，欢迎正在阅读的你也加入。

Answer 1

1、创建一个表单组件，并在其中包含需要验证的输入字段。
2、为每个输入字段设置相应的验证规则，这些规则可以包括但不限于非空检查、长度限制、格式校验等。
3、在提交表单时，调用验证函数来检查所有输入是否符合设定的规则，如果不符合，则显示相应的错误信息给用户。
4、当验证失败时，向用户展示具体的错误信息，以便他们能够修正输入内容。

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-refere...
下面是一个简单的示例代码，展示了如何使用ArkTS实现基本的表单验证功能：

import { Column, Form, Input, Text, Button } from '@ohos/arkui';

@Entry
@Component
struct MyForm {
  @State name: string = '';
  @State email: string = '';

  validateName(name: string): boolean {
    return name.length > 0;
  }

  validateEmail(email: string): boolean {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  }

  onSubmit() {
    if (!this.validateName(this.name)) {
      console.error('Name is required');
      return;
    }
    if (!this.validateEmail(this.email)) {
      console.error('Invalid email format');
      return;
    }
    console.log('Form submitted successfully');
  }

  build() {
    Column({ space: 10 })({
      Form({
        Input({ value: this.name, onInput: (value) => { this.name = value; } }),
        Input({ value: this.email, onInput: (value) => { this.email = value; }, type: 'email' }),
        Button({ text: 'Submit', onClick: () => { this.onSubmit(); } })
      })
    });
  }
}