web蓝桥杯真题：蓝桥校园一卡通

代码：

javascript 复制代码

submit.onclick = () => {
	// TODO 待补充代码
	const form_group = document.querySelectorAll('.form-group')
	const vail_name = document.querySelector('#vail_name')
    const vail_studentId = document.querySelector('#vail_studentId') //获取元素
	let nameReg = /^[\u4e00-\u9fa5]{2,4}$/    //名字正则
	if (!nameReg.test(studentName.value)) {
		form_group[0].classList.add('has-error')    //添加类名
		vail_name.style.display = 'block'    //修改样式
	}
	let idReg = /\d{1,12}$/    //学号正则
	if(!idReg.test(studentId.value)) {
		form_group[1].classList.add('has-error')
		vail_studentId.style.display = 'block'
	}
	if(nameReg.test(studentName.value) && idReg.test(studentId.value)) {
		item[0].innerText = `姓名：${studentName.value}`    //填写元素文本内容
		item[1].innerText = `学号：${studentId.value}`
		item[2].innerText = `学院：${college.value}`
		// 添加 showCard 类显示放大一卡通的动画，请勿删除
		cardStyle.classList.add('showCard') 
	}
}

知识点：
1.正则匹配：

{n,m}：匹配前面的模式至少 n 次且不超过 m 次。
^：匹配字符串的开头。
$：匹配字符串的结尾。
\d ：[0~9] || 匹配一个数字 /^18\d{8}$/
\ ：后加特殊字符
match()方法：返回一个数组，其中存放了与它找到的匹配文本有关的信息
javascript 复制代码
```
str.match(reg)
```
javascript 复制代码
```
var str="ih5sc01xss"; 
var n=str.match(/[0-4]/g);
console.log(n)      //[0,1]
```

test()方法：检查字符串是否与给出的正则表达式模式相匹配，返回Boolean

javascript 复制代码

reg.test(str)

javascript 复制代码

let reg = /^[\d]{2}$/g;
let str = "12";
console.log(reg.test(str));     //返回true
let = "123";
console.log(reg.test(str));     //从数字3开始匹配，只有一个数字，故返回false

2.元素添加类名：

javascript 复制代码

element.classList.add('')

3.元素文本内容修改/填写：

javascript 复制代码

element.innerText = ''