HarmonyOS 开发基础（五）对用户名做点啥

一、实现用户名检验

条件渲染 、生命周期
1.规定用户名长度
2.限定使用的数字及字母（涉及正则表达）

// 导出方式直接从文件夹
import MyInput from "../common/commons/myInput"
@Entry
@Component
/*
组件可以基于struct实现，组件不能有继承关系，struct可以比class更加快速的创建和销毁。*/
struct Index {// 此处可以不赋值// 赋值的目的方便preview的时候检查@State username :string = "1652e1"@State password :string = "456451"private username_reg = /^[A-Za-z0-9]{5,8}$/;onPageShow(){let test_res = this.username_reg.test(this.username)console.info(test_res)}build() {Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}){Text("登录").fontSize(40).fontWeight(700)// 用户名要求//1、用户名至少五位//2、正则匹配// if (this.username.length<5){//   Text("用户名至少五位")//     .fontSize(13)//     .fontWeight(700)//     .fontColor("#ff0000")//     .width("80%")// }// 用生命周期改进if (!this.username_reg.test(this.username)){Text("用户名必须5-8位，英文字母和数字组合").fontSize(13).fontWeight(700).fontColor("#ff0000").width("80%")}// 组件封装，完成父组件向子组件传参MyInput({placeHolder:"请输入用户名",inputValue:$username})/*placeHolder:"请输入用户名" 实现父组件向子组件传递 ：请输入用户名inputValue:$username   子组件把监听得到的数据传到父组件下列代码再使用传回来的数据Text(this.username).fontSize(30).fontWeight(700).width("80%")该处未对数据进行校验，只是简单展示*/MyInput({placeHolder:"请输密码   ",inputValue:$password})Button("进入app")}.width("100%").height("100%").border({width:15,color:"#000"})}
}

二、模拟真机演示

1.演示中当输入用户名不符合要求是有提示
2.输入符合要求是提示的红色字体消失