DevEco Studio帐号注册练习

DevEco Studio帐号注册练习

import { promptAction } from '@kit.ArkUI'

class Reg {
  val: string
  isFlag: number
  msg: string
  msgErr: string
  pat: string
  msgg: string

  constructor(val: string, isFlag: number, msg: string, msgErr: string, pat: string, msgg: string) {
    this.val = val
    this.isFlag = isFlag
    this.msg = msg
    this.msgErr = msgErr
    this.pat = pat
    this.msgg = msgg
  }
}


@Entry
@Component
struct RegPage3 {
  @State message: string = '帐号注册';
  // @State val: string [] = ['', '', '', '', '', '', '']; //默认值
  // @State isFlag: number [] = [0, 0, 0, 0, 0, 0, 0]; //0默认第一次进入   1   验证成功   2 验证失败
  // @State msg: string [] = ['', '', '', '', '', '', '']; //提示
  // @State msgErr: string[] =
  //   ['帐号为6~12位英文字符', '密码6~12位', '密码不一致', '手机号格式不正确', '身份证不正确', '昵称不正确',
  //     '邮箱必须包含@.'] //错误提示
  // @State pat: string[] =
  //   ['^\\w{6,12}$', '^\\w{6,12}$', '^\\w{6,12}$', '^1\\d{10}$', '^\\d{17}[0-9Xx]$', '^.+$', '\\w+@\\w+\\.\\w+'];
  // @State msgg: string [] =
  //   ['帐号不能为空', '密码不能为空', '再次输入密码不能为空', '手机号不能为空', '身份证不能为空', '昵称不能为空',
  //     '邮箱不能为空'];
  @State reg: Reg[] = [];

  // 启动页面时，自动执行一次函数中的内容
  aboutToAppear(): void {
    let r1: Reg = new Reg('', 0, '', '帐号为6~12位英文字符', '^\\w{6,12}$', '帐号不能为空')
    let r2: Reg = new Reg('', 0, '', '密码6~12位', '^\\w{6,12}$', '密码不能为空')
    let r3: Reg = new Reg('', 0, '', '密码不一致', '^\\w{6,12}$', '再次输入密码不能为空')
    let r4: Reg = new Reg('', 0, '', '手机号格式不正确', '^1\\d{10}$', '手机号不能为空')
    let r5: Reg = new Reg('', 0, '', '身份证不正确', '^\\d{17}[0-9Xx]$', '身份证不能为空')
    let r6: Reg = new Reg('', 0, '', '昵称不正确', '^.+$', '昵称不能为空')
    let r7: Reg = new Reg('', 0, '', '邮箱必须包含@.', '\\w+@\\w+\\.\\w+', '邮箱不能为空')

    this.reg.push(r1)
    this.reg.push(r2)
    this.reg.push(r3)
    this.reg.push(r4)
    this.reg.push(r5)
    this.reg.push(r6)
    this.reg.push(r7)
  }

  build() {
    Column() {
      Text(`${this.message}`).fontSize(30)
      //   帐号
      Column({ space: 10 }) {
        Row() {
          TextInput({ placeholder: '帐号' }).width('90%').borderRadius(0)
            .onChange(val => this.reg[0].val = val)
          if (this.reg[0].isFlag == 1) {
            Text('√')
              .fontColor('#fff')
              .fontSize(20)
              .fontWeight(900)
              .width(30)
              .height(30)
              .borderRadius(30)
              .backgroundColor('blue')
              .textAlign(TextAlign.Center)
          } else if (this.reg[0].isFlag == 2) {
            Text('×')
              .fontColor('#fff')
              .fontSize(30)
              .fontWeight(900)
              .width(30)
              .height(30)
              .borderRadius(30)
              .backgroundColor('red')
              .textAlign(TextAlign.Center)

          }
        }.width('100%')


        Text(`${this.reg[0].msg}`).fontColor('red').width('90%')

      }
      .width('90%').height(80)

      // 密码
      Column({ space: 10 }) {
        Row() {
          TextInput({ placeholder: '密码' })
            .width('90%').borderRadius(0).type(InputType.Password)
            .onChange(val => this.reg[1].val = val)
          if (this.reg[1].isFlag == 1) {
            Text('√')
              .fontColor('#fff')
              .fontSize(20)
              .fontWeight(900)
              .width(30)
              .height(30)
              .borderRadius(30)
              .backgroundColor('blue')
              .textAlign(TextAlign.Center)
          } else if (this.reg[1].isFlag == 2) {
            Text('×')
              .fontColor('#fff')
              .fontSize(30)
              .fontWeight(900)
              .width(30)
              .height(30)
              .borderRadius(30)
              .backgroundColor('red')
              .textAlign(TextAlign.Center)

          }
        }.width('100%')


        Text(`${this.reg[1].msg}`).fontColor('red').width('90%')

      }
      .width('90%').height(80)

      // 确认密码
      Column({ space: 10 }) {
        Row() {
          TextInput({ placeholder: '再次输入密码' })
            .width('90%').borderRadius(0).type(InputType.Password)
            .onChange(val => this.reg[2].val = val)
          if (this.reg[2].isFlag == 1) {
            Text('√')
              .fontColor('#fff')
              .fontSize(20)
              .fontWeight(900)
              .width(30)
              .height(30)
              .borderRadius(30)
              .backgroundColor('blue')
              .textAlign(TextAlign.Center)
          } else if (this.reg[2].isFlag == 2) {
            Text('×')
              .fontColor('#fff')
              .fontSize(30)
              .fontWeight(900)
              .width(30)
              .height(30)
              .borderRadius(30)
              .backgroundColor('red')
              .textAlign(TextAlign.Center)

          }
        }.width('100%')


        Text(`${this.reg[2].msg}`).fontColor('red').width('90%')


      }
      .width('90%').height(80)

      // 手机号
      Column({ space: 10 }) {
        Row() {
          TextInput({ placeholder: '手机号' }).width('90%').borderRadius(0)
            .onChange(val => this.reg[3].val = val)
          if (this.reg[3].isFlag == 1) {
            Text('√')
              .fontColor('#fff')
              .fontSize(20)
              .fontWeight(900)
              .width(30)
              .height(30)
              .borderRadius(30)
              .backgroundColor('blue')
              .textAlign(TextAlign.Center)
          } else if (this.reg[3].isFlag == 2) {
            Text('×')
              .fontColor('#fff')
              .fontSize(30)
              .fontWeight(900)
              .width(30)
              .height(30)
              .borderRadius(30)
              .backgroundColor('red')
              .textAlign(TextAlign.Center)

          }
        }.width('100%')

        Text(`${this.reg[3].msg}`).fontColor('red').width('90%')


      }
      .width('90%').height(80)

      // 身份证
      Column({ space: 10 }) {
        Row() {
          TextInput({ placeholder: '身份证' }).width('90%').borderRadius(0)
            .onChange(val => this.reg[4].val = val)
          if (this.reg[4].isFlag == 1) {
            Text('√')
              .fontColor('#fff')
              .fontSize(20)
              .fontWeight(900)
              .width(30)
              .height(30)
              .borderRadius(30)
              .backgroundColor('blue')
              .textAlign(TextAlign.Center)
          } else if (this.reg[4].isFlag == 2) {
            Text('×')
              .fontColor('#fff')
              .fontSize(30)
              .fontWeight(900)
              .width(30)
              .height(30)
              .borderRadius(30)
              .backgroundColor('red')
              .textAlign(TextAlign.Center)

          }
        }.width('100%')

        Text(`${this.reg[4].msg}`).fontColor('red').width('90%')


      }
      .width('90%').height(80)

      // 昵称
      Column({ space: 10 }) {
        Row() {
          TextInput({ placeholder: '请输入昵称' }).width('90%').borderRadius(0)
            .onChange(val => this.reg[5].val = val)
          if (this.reg[5].isFlag == 1) {
            Text('√')
              .fontColor('#fff')
              .fontSize(20)
              .fontWeight(900)
              .width(30)
              .height(30)
              .borderRadius(30)
              .backgroundColor('blue')
              .textAlign(TextAlign.Center)
          } else if (this.reg[5].isFlag == 2) {
            Text('×')
              .fontColor('#fff')
              .fontSize(30)
              .fontWeight(900)
              .width(30)
              .height(30)
              .borderRadius(30)
              .backgroundColor('red')
              .textAlign(TextAlign.Center)

          }
        }.width('100%')


        Text(`${this.reg[5].msg}`).fontColor('red').width('90%')

      }
      .width('90%').height(80)

      //邮箱
      Column({ space: 10 }) {
        Row() {
          TextInput({ placeholder: '邮箱' }).width('90%').borderRadius(0)
            .onChange(val => this.reg[6].val = val)
          if (this.reg[6].isFlag == 1) {
            Text('√')
              .fontColor('#fff')
              .fontSize(20)
              .fontWeight(900)
              .width(30)
              .height(30)
              .borderRadius(30)
              .backgroundColor('blue')
              .textAlign(TextAlign.Center)
          } else if (this.reg[6].isFlag == 2) {
            Text('×')
              .fontColor('#fff')
              .fontSize(30)
              .fontWeight(900)
              .width(30)
              .height(30)
              .borderRadius(30)
              .backgroundColor('red')
              .textAlign(TextAlign.Center)

          }
        }.width('100%')


        Text(`${this.reg[6].msg}`).fontColor('red').width('90%')

      }
      .width('90%').height(80)


      Button('注册')
        .type(ButtonType.Normal).width('90%')
        .onClick(() => {
          for (let i = 0; i < this.reg.length; i++) {
            if (this.reg[i].val.length > 0) {
              if (i == 2) { //再次输入密码
                if (this.reg[1].val == this.reg[2].val) {
                  this.reg[2].isFlag = 1;
                  this.reg[2].msg = ''
                } else {
                  this.reg[2].isFlag = 2;
                  this.reg[2].msg = '两次密码不一致'
                }
                continue
              }
              let flag: boolean = this.patt(i)
            } else {
              this.reg[i].isFlag = 2;
              this.reg[i].msg = this.reg[i].msgg

            }
            //获取原来的数据
            let r: Reg = this.reg[i]
            //   删除并添加
            this.reg.splice(i, 1, r)
          }
        })
      //   是否同意协议
    }
    .height('100%')
    .width('100%')
  }

  // 验证   (下标)
  patt(index: number): boolean {
    if (this.reg[index].val.match(this.reg[index].pat)) { //符合规则
      this.reg[index].isFlag = 1;
      this.reg[index].msg = ''
      return true;
    } else {
      this.reg[index].isFlag = 2;
      this.reg[index].msg = this.reg[index].msgErr

      return false;
    }
  }
}

类

两个特征：

1. 静态特征-----属性

2.动态特征------方法/函数

// class 类的关键词

// person 类名 类名首字母默认大写

class Person {

 *//构造函数*

 constructor(*name*: string, *sex*: string, *age*: number) {

  this.name = *name*

  this.sex = *sex*

  this.age = *age*

 }

 name: string

 sex: string

 age: number

 *// 方法*

 chi() {

  console.log('吃饭');

 }

 he() {

  console.log('喝水');
 }

}

// 对象 类的实例

// 创建对象 实例化对象

// Person 可以用作数据类型

let lzh: Person = new Person(‘李照楠’, ‘男’, 18)

// 通过对象名。属性 进行访问

lzh.name = ‘行哈’

console.log(lzh.name);

lzh.chi()

lzh.he()

在DevEco Studio中

//export  加上关键词后，类可以在其他文件中被引用

// 导包    导入对应的文件
import { Student } from '../model/Student';