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 = ''
相关推荐
昔人'1 小时前
`list-style-type: decimal-leading-zero;`在有序列表`<ol></ol>` 中将零添加到一位数前面
前端·javascript·html
岁月宁静6 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者7 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~7 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge7 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再7 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴8 小时前
Lua 模块的完整入门指南
前端·lua
浪里行舟8 小时前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1239 小时前
CSS易忘属性
前端·css
瓜瓜怪兽亚9 小时前
前端基础知识---Ajax
前端·javascript·ajax