类:有两特征:
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("喝水");
}
}
对象 类的实例,创建对象 实例化对象
写法:
let lm: Person = new Person('小明', '男', 18)
通过对象名.属性 进行访问
写法:
//lm.name='李正华'
//lm.age=18;
//lm.sex='男'
lm.name = '小红'
console.log(lm.name);
lm.chi()
lm.he()
例子:
电脑类 品牌,型号,重量 开机 关机
class Computer {
brand: string
type: string
weight:number
constructor(brand: string, type: string,weight:number) {
this.brand=brand
this.type=type
this.weight=weight
}
star(){
console.log('开机');
}
end(){
console.log('关机');
}
}
let c1:Computer=new Computer('惠普','v7',86)
console.log(c1);
c1.star()
c1.end()
对象数组
1.学生类 学号,姓名,班级 学习
class Student {
id: string
name: string
clas: string
constructor(id: string, name: string, clas: string) {
this.id = id
this.name = name
this.clas = clas
}
study() {
console.log(this.name + "在学习");
}
}
//2.把学生存到数组中
let stus: Array<Student> = [];
let stu1: Student = new Student('001', '张三', 'java')
let stu2: Student = new Student('002', '张四', 'html')
let stu3: Student = new Student('003', '张五', 'java')
let stu4: Student = new Student('004', '张小明', 'css')
let stu5: Student = new Student('005', '张三8', 'js')
let stu6: Student = new Student('006', '张三9', 'ts')
let stu7: Student = new Student('007', '张三7', 'arks')
stus.push(stu1)
stus.push(stu2)
stus.push(stu3)
stus.push(stu4)
stus.push(stu5)
stus.push(stu6)
stus.push(stu7)
//3.遍历数组
for (let i in stus) {
let s: Student = stus[i];
console.log(`学号:${s.id},姓名:${s.name},班级:${s.clas}`);
}
用DevEcoStudio来写代码
用类:
写法:
class Reg{
val:string
isflag:number
Msg:string
msgErr:string
pat:string
asdd:string
constructor( val:string,isflag:number,Msg:string,msgErr:string,pat:string,asdd:string) {
this.val=val
this.isflag=isflag
this.Msg=Msg
this.msgErr=msgErr
this.pat=pat
this.asdd=asdd
}
}
@Entry
@Component
struct Reg3Page {
@State message: string = '账号注册';
// @State val: string[]=['','','','','','',''];//默认值
//@State isFlag: number[]=[0,0,0,0,0,0,0]//0默认第一次进入 1验证成功
//@State Msg: string []= ['','','','','','','']//提示
//@State msgErr:string[]=['账号为6~12为单词字符','密码长度6~12','密码不一致','手机号不正确','身份证不正确','昵称违规','邮箱必须包含@.'];//错误提示
//@State pat:string[]=['^\\w{6,12}$','^\\w{6,12}$','^\\w{6,12}','^\\d{10}$','^\\d{17}[0-9Xx]$','^.+$','^\\w+@\\w+\\.\\w+$',]
//@State asdd: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,'','手机号不正确','^^\\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)
.backgroundColor('blue')
.borderRadius(30)
.textAlign(TextAlign.Center)
} else if (this.reg[0].isflag==2) {
Text('×')
.fontColor('#fff')
.fontSize(25)
.fontWeight(900)
.width(30)
.height(30)
.backgroundColor('red')
.borderRadius(30)
.textAlign(TextAlign.Center)
}
}.width('100%')
Text(`${this.reg[0].Msg}`).fontColor('red').width('100%')
}.width('90%').height(70)
//密码
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)
.backgroundColor('blue')
.borderRadius(30)
.textAlign(TextAlign.Center)
} else if (this.reg[1].isflag==2) {
Text('×')
.fontColor('#fff')
.fontSize(25)
.fontWeight(900)
.width(30)
.height(30)
.backgroundColor('red')
.borderRadius(30)
.textAlign(TextAlign.Center)
}
}.width('100%')
Text(`${this.reg[1].Msg}`).fontColor('red').width('100%')
}.width('90%').height(70)
//确认密码
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)
.backgroundColor('blue')
.borderRadius(30)
.textAlign(TextAlign.Center)
} else if (this.reg[2].isflag==2) {
Text('×')
.fontColor('#fff')
.fontSize(25)
.fontWeight(900)
.width(30)
.height(30)
.backgroundColor('red')
.borderRadius(30)
.textAlign(TextAlign.Center)
}
}.width('100%')
Text(`${this.reg[2].Msg}`).fontColor('red').width('100%')
}.width('90%').height(70)
//手机号
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)
.backgroundColor('blue')
.borderRadius(30)
.textAlign(TextAlign.Center)
} else if (this.reg[3].isflag==2) {
Text('×')
.fontColor('#fff')
.fontSize(25)
.fontWeight(900)
.width(30)
.height(30)
.backgroundColor('red')
.borderRadius(30)
.textAlign(TextAlign.Center)
}
}.width('100%')
Text(`${this.reg[3].Msg}`).fontColor('red').width('100%')
}.width('90%').height(70)
//身份证
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)
.backgroundColor('blue')
.borderRadius(30)
.textAlign(TextAlign.Center)
} else if (this.reg[4].isflag==2) {
Text('×')
.fontColor('#fff')
.fontSize(25)
.fontWeight(900)
.width(30)
.height(30)
.backgroundColor('red')
.borderRadius(30)
.textAlign(TextAlign.Center)
}
}.width('100%')
Text(`${this.reg[4].Msg}`).fontColor('red').width('100%')
}.width('90%').height(70)
//昵称
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)
.backgroundColor('blue')
.borderRadius(30)
.textAlign(TextAlign.Center)
} else if (this.reg[5].isflag==2) {
Text('×')
.fontColor('#fff')
.fontSize(25)
.fontWeight(900)
.width(30)
.height(30)
.backgroundColor('red')
.borderRadius(30)
.textAlign(TextAlign.Center)
}
}.width('100%')
Text(`${this.reg[5].Msg}`).fontColor('red').width('100%')
}.width('90%').height(70)
//邮箱
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)
.backgroundColor('blue')
.borderRadius(30)
.textAlign(TextAlign.Center)
} else if (this.reg[6].isflag==2) {
Text('×')
.fontColor('#fff')
.fontSize(25)
.fontWeight(900)
.width(30)
.height(30)
.backgroundColor('red')
.borderRadius(30)
.textAlign(TextAlign.Center)
}
}.width('100%')
Text(`${this.reg[6].Msg}`).fontColor('red').width('100%')
}.width('90%').height(70)
Button("注册").type(ButtonType.Normal).width('80%')
.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].asdd
}
//获取原来数据
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
}
}
}