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

登陆功能

代码如下:

typescript 复制代码
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 !== ''
}

相关代码可以下载:下载代码

相关推荐
mit6.8248 小时前
理念导向编程|ts
rust·typescript
濮水大叔14 小时前
AOP编程有三大场景:控制器切面,内部切面,外部切面,你get到了吗?
typescript·node.js·nestjs
朝与暮1 天前
史上最全typescript使用指南
typescript
zhangzelin8881 天前
TypeScript入门指南:JavaScript的类型化超集
前端·javascript·其他·typescript
小高0072 天前
🤔「`interface` 和 `type` 到底用哪个?」——几乎每个 TS 新手被这个选择灵魂拷问。
前端·javascript·typescript
TZOF2 天前
TypeScript的新类型(五):tuple元组
前端·后端·typescript
TZOF2 天前
TypeScript的object大小写的区别
前端·后端·typescript
TZOF2 天前
TypeScript的对象如何进行类型声明
前端·后端·typescript
Kitasan Burakku3 天前
Typescript return type
前端·javascript·typescript