目录

案例介绍

本案例将实现一个用户注册表单的基础结构，包括表单状态管理、整体布局和表单验证逻辑。通过Flex组件的布局能力，我们将创建一个结构清晰的注册界面。

代码实现

@Entry
@Component
struct RegistrationForm {
  @State username: string = ''
  @State password: string = ''
  @State confirmPassword: string = ''
  @State phoneNumber: string = ''
  @State verificationCode: string = ''
  @State isAgreeTerms: boolean = false
  @State showPassword: boolean = false
  @State showConfirmPassword: boolean = false
  @State errorMessage: string = ''
  
  // 验证表单
  private validateForm(): boolean {
    if (this.username.length < 4) {
      this.errorMessage = '用户名至少需要4个字符'
      return false
    }
    
    if (this.password.length < 8) {
      this.errorMessage = '密码至少需要8个字符'
      return false
    }
    
    if (this.password !== this.confirmPassword) {
      this.errorMessage = '两次输入的密码不一致'
      return false
    }
    
    if (!/^1\d{10}$/.test(this.phoneNumber)) {
      this.errorMessage = '请输入有效的手机号码'
      return false
    }
    
    if (this.verificationCode.length !== 6) {
      this.errorMessage = '验证码应为6位数字'
      return false
    }
    
    if (!this.isAgreeTerms) {
      this.errorMessage = '请同意用户协议和隐私政策'
      return false
    }
    
    this.errorMessage = ''
    return true
  }

  build() {
    Scroll() {
      Flex({ direction: FlexDirection.Column }) {
        // 顶部标题
        Text('用户注册')
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
          .margin({ top: 40, bottom: 30 })
        
        // 错误信息
        if (this.errorMessage !== '') {
          Text(this.errorMessage)
            .fontSize(14)
            .fontColor(Color.Red)
            .width('90%')
            .margin({ bottom: 15 })
        }
        
        // 表单项容器
        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
          // 表单项将在这里添加
        }
        .width('100%')
        .layoutWeight(1)
      }
      .width('100%')
      .alignItems(HorizontalAlign.Center)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
  }
}

代码详解

1. 状态管理

使用@State装饰器定义表单所需的状态变量：

• 基本信息：username、password、confirmPassword、phoneNumber、verificationCode
• 控制状态：isAgreeTerms、showPassword、showConfirmPassword
• 错误提示：errorMessage

2. 表单验证

validateForm方法实现完整的表单验证逻辑：

• 用户名长度验证（至少4个字符）
• 密码长度验证（至少8个字符）
• 密码一致性验证
• 手机号格式验证（使用正则表达式）
• 验证码长度验证（6位数字）
• 协议同意状态验证

3. 页面结构

整体页面采用嵌套的Flex布局：

• 最外层使用Scroll组件确保内容可滚动
• 主容器使用垂直方向的Flex布局
• 设置合适的宽度和对齐方式
• 使用layoutWeight确保内容区域占据剩余空间

4. 错误提示

错误提示的显示逻辑：

• 通过条件渲染控制错误信息的显示
• 使用红色字体突出显示错误信息
• 设置合适的宽度和边距确保显示效果

总结

本案例展示了如何使用Flex组件实现注册表单的基础结构。通过合理的状态管理和布局设计，我们创建了一个可扩展的表单框架。表单验证逻辑的实现确保了数据的有效性，为用户提供及时的错误反馈。这种实现方式为后续添加具体的表单项提供了良好的基础。