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

发布时间：2026/7/2 20:26:35

一、项目简介本期基于HarmonyOS ArkTS实现最常用的登录页 注册页功能登录、注册双页面路由跳转注册页密码一致性校验、非空校验输入框双向数据绑定错误弹窗提示注册失败登录成功跳转首页完整 UI 布局头像、输入框、按钮、文字跳转适合鸿蒙初学者练手页面干净、代码注释详细、可直接运行。二、实现效果注册页输入账号、密码、确认密码空值 / 密码不一致弹出提示注册成功自动跳转到登录页登录页可跳转注册页登录按钮跳转首页所有输入框双向绑定数据实时获取三、核心知识点State 状态变量存储账号、密码数据TextInput 双向绑定$ 语法实现双向数据绑定router 页面路由页面之间互相跳转AlertDialog 弹窗提示表单校验失败提示Column/Row 弹性布局实现登录注册标准 UI四、项目页面配置 pages.json项目根目录 pages.jsonsrc 数组中写入所有页面路径系统自动识别页面跳转直接填路径字符串即可{ src: [ pages/RouterLogin, pages/RouterRegister, pages/HomePage ] }五、完整项目源码1. 注册页面 RouterRegister.etstypescript 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.etstypescript 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 Recordstring,string if (params){ this.username params.username } } build() { Column() { Text(你好 ${this.username}) .fontSize(30) .margin({top:100}) } .width(100%) .height(100%) } }七、总结本篇实现了鸿蒙基础的登录注册完整业务流程涵盖 ArkTS 最核心的状态管理、双向绑定、路由跳转、表单校验、弹窗提示。代码简洁易懂非常适合鸿蒙零基础入门学习可直接用于课程作业、实训项目、毕业设计基础模板。