最新鸿蒙HarmonyOS4.0开发登陆的界面2

原创已于 2023-12-19 14:35:59 修改 · 752 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#typescript

于 2023-12-08 23:22:59 首次发布

鸿蒙开发专栏收录该内容

13 篇文章

订阅专栏

本文介绍了在Ohos平台上构建一个包含用户名和密码输入以及登录验证功能的组件，展示了如何处理用户输入、状态管理和错误提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

登陆功能

在这里插入图片描述
代码如下：

import router from '@ohos.router';
@Entry
@Component
struct Index {
  @State message: string = 'XXAPP登陆'
  @State userName: string = '';
  @State password: string = '';
  build() {
    Row() {
      Column({space:50}) {
        Image($r('app.media.icon')).width(200).interpolation(ImageInterpolation.High)
        Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)
         TextInput({placeholder:'用户名'}) .onChange((value: string) => {
           this.userName = value;
         })
        TextInput({placeholder:'密码'}).onChange((value: string) => {
          this.password = value;
        })
        Button('确定').onClick(()=>{
          if(isLoginButtonClickable(this.userName,this.password)){
            router.pushUrl({
              url: 'pages/Myprofile'
            })
          }else{

            AlertDialog.show(
              {
                title: '提示',
                message: '用户名或密码错',
                autoCancel: true,
                alignment: DialogAlignment.Bottom,
                offset: { dx: 0, dy: -20 },
                confirm: {
                  value: '确认',
                  action: () => {
                    console.info('Callback when confirm button is clicked');
                  }
                },
                cancel: () => {
                  console.info('Closed callbacks')
                }
              }
            )
          }
        })

      }.justifyContent(FlexAlign.Center).height('100%')
    }
  }
}

/**
 * 根据用户名和密码的输入计算登录按钮是否可点击。
 *
 * @param {string} userName - 用户名，要求为手机的格式。
 * @param {string} password - 密码。
 * @return {boolean} 是否可点击登录按钮。
 */
function isLoginButtonClickable(userName: string, password: string): boolean {
  // 在这里添加检查用户名是否为手机格式的逻辑
  // 例如，可以使用正则表达式验证用户名是否符合手机格式
  const isUserNameValid = /\d{11}/.test(userName)
  return isUserNameValid && password !== ''
}