梅州网站建,网站编程学习,网站建商城,王野小说一、实现用户名检验
条件渲染 、生命周期 1.规定用户名长度 2.限定使用的数字及字母#xff08;涉及正则表达#xff09;
// 导出方式直接从文件夹
import MyInput from ../common/commons/myInput
Entry
Component
/*
组件可以基于struct实现#xff0c;组件…一、实现用户名检验
条件渲染 、生命周期 1.规定用户名长度 2.限定使用的数字及字母涉及正则表达
// 导出方式直接从文件夹
import MyInput from ../common/commons/myInput
Entry
Component
/*
组件可以基于struct实现组件不能有继承关系struct可以比class更加快速的创建和销毁。*/
struct Index {// 此处可以不赋值// 赋值的目的方便preview的时候检查State username :string 1652e1State password :string 456451private 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.length5){// 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.输入符合要求是提示的红色字体消失
