最新鸿蒙HarmonyOS4.0开发登陆的界面2-编程知识

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

登陆功能

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

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 !== ''
}