HarmonyOS 鸿蒙Next有没有表单快速校验的工具类或者方法

自定义校验工具类

可以创建一个工具类，将常用的校验规则封装在其中，例如校验邮箱、手机号码、密码长度等。

class FormValidator 
{
    // 校验邮箱
    static function validateEmail(email: string): boolean {
        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        return emailRegex.test(email);
    }

    // 校验手机号码
    static function validatePhoneNumber(phone: string): boolean {
        const phoneRegex = /^1[3-9]\d{9}$/;
        return phoneRegex.test(phone);
    }

    // 校验密码长度
    static function validatePasswordLength(password: string, minLength: number, maxLength: number): boolean {
        return password.length >= minLength && password.length <= maxLength;
    }
}

1. 在表单中使用校验工具类

在表单组件中调用上述工具类的方法进行校验。以下是一个简单的表单示例，包含邮箱和密码输入框，并进行校验：

@Entry
@Component
struct FormValidationExample {
    @State email: string = '';
    @State password: string = '';
    @State emailError: boolean = false;
    @State passwordError: boolean = false;

    handleSubmit() {
        this.emailError = !FormValidator.validateEmail(this.email);
        this.passwordError = !FormValidator.validatePasswordLength(this.password, 6, 20);

        if (!this.emailError && !this.passwordError) {
            // 表单校验通过，执行提交操作
            console.log('表单提交成功，邮箱：', this.email, '，密码：', this.password);
        } else {
            console.log('表单校验失败');
        }
    }

    build() {
        Column({ space: 20 }) {
            TextField({
                placeholder: '请输入邮箱',
                onInput: (value: string) => {
                    this.email = value;
                }
            })
           .borderColor(this.emailError? Color.Red : Color.Gray)

            TextField({
                placeholder: '请输入密码',
                type: InputType.Password,
                onInput: (value: string) => {
                    this.password = value;
                }
            })
           .borderColor(this.passwordError? Color.Red : Color.Gray)

            Button('提交')
               .onClick(() => {
                    this.handleSubmit();
                })
        }
       .width('100%')
       .padding({ left: 20, right: 20, top: 50 })
    }
}