目录

案例介绍

本篇文章将介绍如何在登录注册表单中实现一些高级特性，包括第三方登录选项、多重协议链接和表单验证增强等功能，进一步提升表单的功能完整性。

代码实现

import router from '@ohos.router';

@Entry
@Component
struct LoginRegisterDemo {
  @State isLoginPage: boolean = true;
  @State username: string = '';
  @State password: string = '';
  @State confirmPassword: string = '';
  @State email: string = '';
  @State agreeTerms: boolean = false;
  @State errorMsg: string = '';

  build() {
    Column() {
      // 基础结构省略...
    }
  }

  @Builder
  buildLoginForm() {
    Column({ space: 16 }) {
      // 基本登录表单省略...
      
      // 第三方登录选项
      Column({ space: 16 }) {
        Text('其他登录方式')
          .fontSize(14)
          .fontColor('#666666')
          .margin({ top: 60, bottom: 16 })
        
        Row({ space: 36 }) {
          // 微信登录
          Circle({ width: 50, height: 50 })
            .fill('#4CAF50')
            .onClick(() => {
              this.handleThirdPartyLogin('wechat');
            })
          
          // QQ登录
          Circle({ width: 50, height: 50 })
            .fill('#2196F3')
            .onClick(() => {
              this.handleThirdPartyLogin('qq');
            })
          
          // 微博登录
          Circle({ width: 50, height: 50 })
            .fill('#F44336')
            .onClick(() => {
              this.handleThirdPartyLogin('weibo');
            })
        }
      }
      .width('100%')
      .alignItems(HorizontalAlign.Center)
    }
  }

  @Builder
  buildRegisterForm() {
    Column({ space: 16 }) {
      // 基本注册表单省略...
      
      // 多重协议链接
      Row() {
        Checkbox()
          .select(this.agreeTerms)
          .onChange((value: boolean) => {
            this.agreeTerms = value;
            this.errorMsg = '';
          })
        
        Text('我已阅读并同意')
          .fontSize(14)
          .fontColor('#666666')
          .margin({ left: 8 })
        
        FormLink() {
          Text('《用户协议》')
            .fontSize(14)
            .fontColor('#2196F3')
        }
        .onClick(() => {
          this.showTermsDialog('用户协议');
        })
        
        Text('和')
          .fontSize(14)
          .fontColor('#666666')
        
        FormLink() {
          Text('《隐私政策》')
            .fontSize(14)
            .fontColor('#2196F3')
        }
        .onClick(() => {
          this.showTermsDialog('隐私政策');
        })
      }
      .width('100%')
      .alignItems(VerticalAlign.Center)
      
      // 注册按钮
      Button('注册')
        .width('100%')
        .height(50)
        .borderRadius(8)
        .backgroundColor('#2196F3')
        .fontColor('#FFFFFF')
        .fontSize(16)
        .fontWeight(FontWeight.Medium)
        .onClick(() => {
          // 增强的表单验证
          if (!this.validateForm()) {
            return;
          }
          
          console.info(`注册: 用户名=${this.username}, 邮箱=${this.email}`);
          this.errorMsg = '';
        })
    }
  }

  // 第三方登录处理
  handleThirdPartyLogin(platform: string) {
    console.info(`第三方登录: ${platform}`);
    // 实际应用中，这里应该调用相应的第三方登录API
    AlertDialog.show({
      title: '第三方登录',
      message: `正在使用${platform}账号登录...
实际应用中这里应该跳转到相应的授权页面。`,
      confirm: {
        value: '确定',
        action: () => {
          console.info(`关闭${platform}登录对话框`);
        }
      }
    });
  }

  // 增强的表单验证
  validateForm(): boolean {
    // 用户名验证
    if (this.username.length === 0) {
      this.errorMsg = '请设置用户名';
      return false;
    }
    if (this.username.length < 4) {
      this.errorMsg = '用户名至少需要4个字符';
      return false;
    }
    
    // 邮箱验证
    if (this.email.length === 0) {
      this.errorMsg = '请输入邮箱';
      return false;
    }
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(this.email)) {
      this.errorMsg = '请输入有效的邮箱地址';
      return false;
    }
    
    // 密码验证
    if (this.password.length === 0) {
      this.errorMsg = '请设置密码';
      return false;
    }
    if (this.password.length < 6) {
      this.errorMsg = '密码至少需要6个字符';
      return false;
    }
    if (this.confirmPassword.length === 0) {
      this.errorMsg = '请确认密码';
      return false;
    }
    if (this.password !== this.confirmPassword) {
      this.errorMsg = '两次输入的密码不一致';
      return false;
    }
    
    // 协议确认
    if (!this.agreeTerms) {
      this.errorMsg = '请阅读并同意用户协议和隐私政策';
      return false;
    }
    
    return true;
  }
}

代码详解

第三方登录实现

1. 布局结构：

   • 使用Column和Row组合布局
   • 圆形图标表示不同的登录平台
   • 统一的间距和对齐方式

2. 交互处理：

   • 为每个图标添加点击事件
   • 调用handleThirdPartyLogin方法
   • 显示模拟的登录过程

多重协议链接

1. 布局优化：

   • 复选框和多个文本组合
   • 使用FormLink创建多个协议链接
   • 统一的样式和间距

2. 交互处理：

   • 独立的协议查看功能
   • 统一的对话框显示
   • 协议同意状态管理

表单验证增强

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

1. 用户名验证：

   • 检查是否为空
   • 验证最小长度

2. 邮箱验证：

   • 检查是否为空
   • 使用正则表达式验证格式

3. 密码验证：

   • 检查是否为空
   • 验证最小长度
   • 确认两次输入是否一致

4. 协议确认：

   • 检查是否同意协议

总结

本篇文章展示了如何实现登录注册表单的高级特性：

1. 集成了第三方登录功能
2. 优化了多重协议链接的实现
3. 增强了表单验证的完整性
4. 提供了更好的错误提示

这些高级特性的实现，使登录注册功能更加完善和专业。