最新鸿蒙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 !== ''
}

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

相关推荐
之恒君12 小时前
typescript(tsconfig.json - esModuleInterop)
前端·typescript
guangzan14 小时前
VS Code 操作 “Delete unused imports” 时,不删除 React 导入
vscode·typescript·eslint
华仔啊15 小时前
别再写 TypeScript enum了!新枚举方式让 bundle 瞬间小20%
javascript·typescript
子兮曰20 小时前
🚀彻底掌握异步编程:async/await + Generator 深度解析与20个实战案例
前端·javascript·typescript
知否技术21 小时前
别再踩坑了!这份 Vue3+TypeScript 项目教程,赶紧收藏!
前端·typescript
@AfeiyuO1 天前
分类别柱状图(Vue3)
typescript·vue·echarts
一只小风华~1 天前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
烛阴1 天前
【TS 设计模式完全指南】用适配器模式优雅地“兼容”一切
javascript·设计模式·typescript
叫我阿柒啊2 天前
从Java全栈到前端框架的实战之路
java·数据库·微服务·typescript·前端框架·vue3·springboot
Spider_Man2 天前
打造属于你的前端沙盒 🎉
前端·typescript·github