零基础开始学习鸿蒙开发-鸿蒙开发登录监听登录按钮并且获取文本框的值，登录校验。_鸿蒙开发点击获取按钮的值

目录

1.获取文本框的值，下面就用户名的值获取进行举例

        1.1利用onChange事件获取文本框改变的值

2.进行文本框的校验

        2.1定义isEmpty方法进行文本框的校验

3. 使用Row进行水平布局，  在布局里面添加Text文本提示语

    3.1登录的时候，通过onClick方法监听button事件获取到的值来判断是否 登录成功。

4.登录监听事件，主要监听两次输入的密码是否一致，还有输入的用户名或者密码是否正确。

5.以下是完整的鸿蒙登录业务逻辑开发的前端功能，直接放到index.ets下面即可运行。

6.下面是代码运行的最终效果。

---

1.获取文本框的值，下面就用户名的值获取进行举例

 //定义用户名(全局变量)
  @State username:string ="";

        1.1利用onChange事件获取文本框改变的值

            

 //输入框
        TextInput({placeholder:"请输入用户名"}).type(InputType.Normal)
          .width("300").onChange((username:string)=>{
          //通过onChange事件获取用户名
          this.username = username;
          console.debug("username==={}",this.username);
        });

2.进行文本框的校验

        2.1定义isEmpty方法进行文本框的校验

         

  //判断输入的参数是否为空方法
    isEmty(username:string,password:string,repeatPwd:string){
     //判断用户名是否为空
     if(username==null ||username==""){
       console.debug("用户名为空----");
       return true;
     }
     if(password==null ||password==""){
       console.debug("密码为空----");
       return true;
     }
 
     if(repeatPwd==null ||repeatPwd==""){
       console.debug("重复输入密码为空----");
       return true;
     }
  }

3. 使用Row进行水平布局，  在布局里面添加Text文本提示语

Row({space:5}){
          Text("提示语:").fontColor(Color.Gray);
          Text(this.message).fontColor(Color.Red);
        }

    3.1登录的时候，通过onClick方法监听button事件获取到的值来判断是否 登录成功。

4.登录监听事件，主要监听两次输入的密码是否一致，还有输入的用户名或者密码是否正确。

  Button("登录按钮").width("50%").onClick(()=>{
        console.debug("登录")
        //判断是否为空
        this.isBlank = this.isEmty(this.username,this.password,this.repeatPwd);
        if (this.isBlank) {
           this.message = "请检查参数是否为空";
          return;
        }else {
          //判断两次输入的密码是否正确
 
          if (this.password!=this.repeatPwd){
            this.message ="两次输入的密码不一致";
          }
          //判断登录成功的 条件
          if (this.username=="admin"&&this.password=="admin") {
            this.message ="登录成功!!";
          }
        }
 
      }).backgroundColor(Color.Green);

5.以下是完整的鸿蒙登录业务逻辑开发的前端功能，直接放到index.ets下面即可运行。

/*
 
 
 
 
@Entry
@Component
struct Index {
  @State message: string = 'Hello Worlczxcxzd'
 
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}*/
@Entry
@Component
struct  registePage{
  //定义用户名
  @State username:string ="";
  //定义密码
  @State password:string ="";
  //定义重复用户名密码
  @State repeatPwd:string ="";
  //判断是否为空的标志
  @State isBlank:boolean=false;
  //提示语
  @State message:string ="";
 
 
  //判断输入的参数是否为空方法
    isEmty(username:string,password:string,repeatPwd:string){
     //判断用户名是否为空
     if(username==null ||username==""){
       console.debug("用户名为空----");
       return true;
     }
     if(password==null ||password==""){
       console.debug("密码为空----");
       return true;
     }
 
     if(repeatPwd==null ||repeatPwd==""){
       console.debug("重复输入密码为空----");
       return true;
     }
  }
 
  build(){
    //垂直的容器
    Column({space:5}){
      Image($r("app.media.app_icon"))
        .width("100")
        .height("100")
        .margin(50)
      Column({space:5}){
        //输入框
        TextInput({placeholder:"请输入用户名"}).type(InputType.Normal)
          .width("300").onChange((username:string)=>{
          //通过onChange事件获取用户名
          this.username = username;
          console.debug("username==={}",this.username);
        });
        //密码输入框
        TextInput({placeholder:"请输入密码"}).type(InputType.Password)
          .width("300").onChange((password:string)=>{
          //通过onChange事件获取密码
          this.password =   password;
          console.debug("password==={}",this.password);
        });
        //重新确认密码
        TextInput({placeholder:"请再次输入密码"}).type(InputType.Password)
          .width("300").onChange((repeatPwd:string)=>{
          //通过onChange事件获取重复输入的密码
          this.repeatPwd = repeatPwd;
          console.debug("repeatPwd==={}",this.repeatPwd);
        });
        Row({space:5}){
          Text("提示语:").fontColor(Color.Gray);
          Text(this.message).fontColor(Color.Red);
        }
 
        //在这里提示一下
     /*  Column(){
         Text(this.message.toString()).fontSize(6).fontColor(Color.Green).width("300");
       }*/
      }
 
     /*
     */
     /* */
      //登录
      Button("登录按钮").width("50%").onClick(()=>{
        console.debug("登录")
        //判断是否为空
        this.isBlank = this.isEmty(this.username,this.password,this.repeatPwd);
        if (this.isBlank) {
           this.message = "请检查参数是否为空";
          return;
        }else {
          //判断两次输入的密码是否正确
 
          if (this.password!=this.repeatPwd){
            this.message ="两次输入的密码不一致";
          }
          //判断登录成功的 条件
          if (this.username=="admin"&&this.password=="admin") {
            this.message ="登录成功!!";
          }
        }
 
      }).backgroundColor(Color.Green);
 
    }.height("100%")
    .width("100%")
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }
 
}

6.下面是代码运行的最终效果。

后面会继续分享怎么实现登录的网络请求，你们的支持是我最大的创作动力。