当前位置：首页 > news >正文

【鸿蒙ArkTS】极简登录注册页面+页面跳转+密码校验

news 2026/7/2 20:37:49

一、项目简介

本期基于HarmonyOS ArkTS实现最常用的登录页 + 注册页功能：

注册页密码一致性校验、非空校验

输入框双向数据绑定

错误弹窗提示（注册失败）

登录成功跳转首页

完整 UI 布局（头像、输入框、按钮、文字跳转）

适合鸿蒙初学者练手，页面干净、代码注释详细、可直接运行。

二、实现效果

注册页：输入账号、密码、确认密码，空值 / 密码不一致弹出提示

注册成功自动跳转到登录页

登录页可跳转注册页，登录按钮跳转首页

所有输入框双向绑定，数据实时获取

三、核心知识点

@State 状态变量：存储账号、密码数据

TextInput 双向绑定：$ 语法实现双向数据绑定

router 页面路由：页面之间互相跳转

AlertDialog 弹窗提示：表单校验失败提示

Column/Row 弹性布局：实现登录注册标准 UI

四、项目页面配置 pages.json

项目根目录 pages.json，src 数组中写入所有页面路径，系统自动识别页面，跳转直接填路径字符串即可：

{ "src": [ "pages/RouterLogin", "pages/RouterRegister", "pages/HomePage" ] }

五、完整项目源码

1. 注册页面 RouterRegister.ets

typescript import router from '@ohos.router'; import AlertDialog from '@ohos.promptAction'; @Entry @Component struct RouterRegister{ // 定义状态变量 @State username:string = "" @State password:string = "" @State password2:string = "" build() { Column({space:25}){ // 顶部头像 Image($r('app.media.banner1')) .width(120) .height(120) .borderRadius(60) Text("注 册") .fontSize(32) .fontWeight(FontWeight.Bolder) // 账号输入 Row(){ Text("账号") .fontSize(26) .width('40%') .textAlign(TextAlign.Center) TextInput({text: $username}) .width('60%') .height(50) } // 密码输入 Row(){ Text("密码") .fontSize(26) .width('40%') .textAlign(TextAlign.Center) TextInput({text: $password}) .width('60%') .height(50) .type(InputType.Password) } // 确认密码 Row(){ Text("确认密码") .fontSize(26) .width('40%') .textAlign(TextAlign.Center) TextInput({text: $password2}) .width('60%') .height(50) .type(InputType.Password) } // 跳转登录 Text("已有账号，立即登录") .fontSize(22) .fontColor(0xababab) .onClick(()=>{ router.pushUrl({ url:"pages/RouterLogin" }) }) // 注册按钮 & 表单校验 Button("立即注册") .width('100%') .height(50) .fontSize(24) .onClick(()=>{ // 非空判断 + 密码一致判断 if (this.username !== "" && this.password !== "" && this.password2 !== "" && this.password === this.password2){ // 注册成功跳转登录页 router.pushUrl({ url:"pages/RouterLogin" }) } else { // 注册失败弹窗 AlertDialog.show({ title:"注册失败", message:"账号密码不能为空，且两次密码必须一致！" }) } }) } .width('100%') .height('100%') .padding(15) } }

2. 登录页面 RouterLogin.ets

typescript import router from '@ohos.router'; @Entry @Component struct RouterLogin{ // 双向绑定账号密码 @State account:string = "" @State pwd:string = "" build() { Column({space:25}){ Image($r('app.media.banner0')) .width(120) .height(120) .borderRadius(60) Text("登 录") .fontSize(32) .fontWeight(FontWeight.Bold) Row({space:15}){ Text("账 号") .fontSize(26) TextInput({text: $account}) .width("70%") .height(50) } Row({space:15}){ Text("密 码") .fontSize(26) TextInput({text: $pwd}) .width("70%") .height(50) .type(InputType.Password) } // 跳转注册页 Text("没有账号，立即注册") .fontSize(22) .fontColor(0xababab) .onClick(()=>{ router.pushUrl({ url:"pages/RouterRegister" }) }) // 登录跳转首页 Button("立 即 登 录") .width('100%') .height(50) .fontSize(24) .onClick(()=>{ router.pushUrl({ url:"pages/HomePage" }) }) } .width('100%') .height('100%') .padding(15) } }

3. 首页 HomePage.ets（接收路由传递参数并渲染）

import router from '@ohos.router'; @Entry @Component struct HomePage{ // 接收传递过来的用户名 @State username:string = "" // 页面每次显示时触发，获取路由传参 onPageShow(): void { // 获取跳转携带的参数 const params = router.getParams() as Record<string,string> if (params){ this.username = params.username } } build() { Column() { Text(`你好 ${this.username}`) .fontSize(30) .margin({top:100}) } .width('100%') .height('100%') } }