@Entry @Component struct RegPage { @State message: string = '帐号注册'; @State account: string = ''; @State isAcc: number = 0 //默认成功 @State accMsg: string = '' //密码 @State pwd: string = '' @State isPwd: number = 0 @State pwdMsg: string = '' //确认密码 @State pwd2: string = '' @State isPwd2: number = 0 @State pwdMsg2: string = '' //手机号 @State tel: string = '' @State isTel: number = 0 @State telMsg: string = '' //身份证 @State cardNum: string = '' @State isCardNum: number = 0 @State cardNumMsg: string = '' //昵称 @State names: string = '' @State isNames: number = 0 @State namesMsg: string = '' //邮箱 @State email: string = '' @State isEmail: number = 0 @State emailMsg: string = '' build() { Column() { Text(`${this.message}`).fontSize(30) //帐号 Column({ space: 10 }) { Row() { TextInput({ placeholder: '帐号' }).width('90%').borderRadius(0) .onChange(val => this.account = val) if (this.isAcc == 1) { Text('√') .fontColor('#fff') .width(30) .height(30) .backgroundColor('green') .borderRadius(30) .textAlign(TextAlign.Center) .fontWeight(900) .fontSize(20) } else if (this.isAcc == 2) { Text('×') .fontColor('#fff') .width(30) .height(30) .backgroundColor('red') .borderRadius(30) .textAlign(TextAlign.Center) .fontWeight(900) .fontSize(25) } }.width('100%') if (this.isAcc == 2) { Text(`${this.accMsg}`).fontColor('red').width('100%') } } .width('90%').height(80) //密码 Column({ space: 10 }) { Row() { TextInput({ placeholder: '密码' }).width('90%').borderRadius(0).type(InputType.Password) .onChange(val => this.pwd = val) if (this.isPwd == 1) { Text('√') .fontColor('#fff') .width(30) .height(30) .backgroundColor('green') .borderRadius(30) .textAlign(TextAlign.Center) .fontWeight(900) .fontSize(20) } else if (this.isPwd == 2) { Text('×') .fontColor('#fff') .width(30) .height(30) .backgroundColor('red') .borderRadius(30) .textAlign(TextAlign.Center) .fontWeight(900) .fontSize(25) } }.width('100%') if (this.isPwd == 2) { Text(`${this.pwdMsg}`).fontColor('red').width('100%') } } .width('90%').height(80) //确认密码 Column({ space: 10 }) { Row() { TextInput({ placeholder: '再次输入密码' }).width('90%').borderRadius(0).type(InputType.Password) .onChange(val => this.pwd2 = val) if (this.isAcc == 1) { Text('√') .fontColor('#fff') .width(30) .height(30) .backgroundColor('green') .borderRadius(30) .textAlign(TextAlign.Center) .fontWeight(900) .fontSize(20) } else if (this.isPwd2 == 2) { Text('×') .fontColor('#fff') .width(30) .height(30) .backgroundColor('red') .borderRadius(30) .textAlign(TextAlign.Center) .fontWeight(900) .fontSize(25) } }.width('100%') if (this.isPwd2 == 2) { Text(`${this.pwdMsg2}`).fontColor('red').width('100%') } } .width('90%').height(80) //手机号 Column({ space: 10 }) { Row() { TextInput({ placeholder: '手机号' }).width('90%').borderRadius(0) .onChange(val => this.tel = val) if (this.isTel == 1) { Text('√') .fontColor('#fff') .width(30) .height(30) .backgroundColor('green') .borderRadius(30) .textAlign(TextAlign.Center) .fontWeight(900) .fontSize(20) } else if (this.isTel == 2) { Text('×') .fontColor('#fff') .width(30) .height(30) .backgroundColor('red') .borderRadius(30) .textAlign(TextAlign.Center) .fontWeight(900) .fontSize(25) } }.width('100%') if (this.isTel == 2) { Text(`${this.telMsg}`).fontColor('red').width('100%') } } .width('90%').height(80) //身份证 Column({ space: 10 }) { Row() { TextInput({ placeholder: '身份证' }).width('90%').borderRadius(0) .onChange(val => this.cardNum = val) if (this.isAcc == 1) { Text('√') .fontColor('#fff') .width(30) .height(30) .backgroundColor('green') .borderRadius(30) .textAlign(TextAlign.Center) .fontWeight(900) .fontSize(20) } else if (this.isCardNum == 2) { Text('×') .fontColor('#fff') .width(30) .height(30) .backgroundColor('red') .borderRadius(30) .textAlign(TextAlign.Center) .fontWeight(900) .fontSize(25) } }.width('100%') if (this.isCardNum == 2) { Text(`${this.cardNumMsg}`).fontColor('red').width('100%') } } .width('90%').height(80) //昵称 Column({ space: 10 }) { Row() { TextInput({ placeholder: '名字' }).width('90%').borderRadius(0) .onChange(val => this.names = val) if (this.isAcc == 1) { Text('√') .fontColor('#fff') .width(30) .height(30) .backgroundColor('green') .borderRadius(30) .textAlign(TextAlign.Center) .fontWeight(900) .fontSize(20) } else if (this.isNames == 2) { Text('×') .fontColor('#fff') .width(30) .height(30) .backgroundColor('red') .borderRadius(30) .textAlign(TextAlign.Center) .fontWeight(900) .fontSize(25) } }.width('100%') if (this.isNames == 2) { Text(`${this.namesMsg}`).fontColor('red').width('100%') } } .width('90%').height(80) //邮箱 Column({ space: 10 }) { Row() { TextInput({ placeholder: '邮箱' }).width('90%').borderRadius(0) .onChange(val => this.cardNum = val) if (this.isAcc == 1) { Text('√') .fontColor('#fff') .width(30) .height(30) .backgroundColor('green') .borderRadius(30) .textAlign(TextAlign.Center) .fontWeight(900) .fontSize(20) } else if (this.isCardNum == 2) { Text('×') .fontColor('#fff') .width(30) .height(30) .backgroundColor('red') .borderRadius(30) .textAlign(TextAlign.Center) .fontWeight(900) .fontSize(25) } }.width('100%') if (this.isCardNum == 2) { Text(`${this.cardNumMsg}`).fontColor('red').width('100%') } } .width('90%').height(80) Button('注册').type(ButtonType.Normal).width('80%') .onClick(() => { if (this.account.length > 0) { if (this.account.match('^\\w{6,12}$')) { this.isAcc = 1 this.accMsg = '' } else { this.isAcc = 2 this.accMsg = '帐号应为6——12为数字或者字母' } } else { this.isAcc = 2 this.accMsg = '帐号不能空' } if (this.pwd.length > 0) { if (this.pwd.match('^\\w{6,12}$')) { this.isPwd = 1 this.pwdMsg = '' } else { this.isPwd = 2 this.pwdMsg = '密码应为6——12为数字或者字母' } } else { this.isPwd = 2 this.pwdMsg = '密码不能空' } }) //是不是确认 } .height('100%') .width('100%') } //验证 patt(val: string, reg: string): boolean { if(val.match(reg)){ return false }else { } return false }
今日知识点
最新推荐文章于 2024-08-25 12:51:19 发布