类的两个特征
1.静态特征:静态特征,2.动态特征:动态特征叫做方法/函数
创建类使用class关键字,类名首字母要大写
@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
}