蓝桥校园一卡通
发表于:2024-12-10
字数统计:1270 字
预计阅读5分钟
介绍
每年大一新生报道时，都需要办一张校园一卡通，无论吃饭、洗澡、买东西、甚至去图书馆借书都要用，小蓝想帮助学校做一个制卡界面，但是用 js 做用户输入验证不知道怎么写，快来帮助小蓝完成这个页面吧！
准备
本题已经内置了初始代码，打开实验环境，目录结构如下：
txt
├── css
│ ├── wish.css
│ └── index.css
├── images
│ └── college.jpg
└── index.html其中：
index.html是主页面。images是图片文件夹。css是样式文件夹。
注意：打开环境后发现缺少项目代码，请复制下述命令至命令行进行下载。
bash
wget https://labfile.oss.aliyuncs.com/courses/18164/card.zip && unzip card.zip && rm card.zip在浏览器中预览 index.html 页面，显示如下所示：
在初始化的时候输入框并没有做验证，卡片内容也无法正常显示。
目标
请在 index.html 文件中补全代码，具体需求如下：
- 完成表单验证：
- 姓名：2-4 个汉字，验证错误在对应的表单项（
class=form-group）添加类class=has-error，并在下方显示报错信息（即id=vail_name的元素显示）。
tips: 正则中用
[\u4e00-\u9fa5]表示汉字。
- 学号: 1-12 位纯数字，错误即在对应的表单项（
class=form-group）添加类class=has-error，并在下方显示报错信息（即id=vail_studentId的元素显示）。
- 表单验证通过过后，正确显示卡片。在卡片（
class=info）元素下的（class=item）的元素中按照顺序分别显示表单提交的内容：姓名：xxx，学号：xxx, 学院：xxx。
完成后效果如下：
规定
- 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成无法判题通过。
- 满足需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动检测。
判分标准
- 本题完全实现题目目标得满分，否则得 0 分。
总通过次数: 1550 | 总提交次数: 1712 | 通过率: 90.5%
难度: 简单 标签: 2022, 省模拟赛, Web 前端, JavaScript
题解
js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>蓝桥校园一卡通</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/index.css" />
</head>
<body>
<div id="app">
<div class="form">
<div class="card" id="cardStyle">
<div class="cardName">蓝桥校园一卡通</div>
<div class="info">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<div class="content">
<div class="form-group">
<label for="studentName">姓名</label>
<input type="text" class="form-control" id="studentName" placeholder="请输入姓名" aria-describedby="inputSuccess2Status">
<span id="vail_name" style="display: none;" class="help-block"> 姓名是2-4个汉字，请您检查输入的内容</span>
</div>
<div class="form-group">
<label for="studentId">学号</label>
<input type="number" class="form-control" id="studentId" placeholder="请输入学号">
<span id="vail_studentId" style="display: none;" class="help-block"> 学号是1-12位的数字，请您检查输入的内容</span>
</div>
<div class="form-group">
<label for="college">学院</label>
<select id="college" class="form-control">
<option value="软件工程学院">软件工程学院</option>
<option value="信息技术学院">信息技术学院</option>
<option value="数字媒体学院">数字媒体学院</option>
<option value="计算机科学学院">计算机科学学院</option>
</select>
</div>
<button id="submit">制卡</button>
</div>
</div>
</div>
<script>
// 获取DOM元素对象
const studentName = document.getElementById("studentName"); // 姓名
const studentId = document.getElementById("studentId"); // 学号
const college = document.getElementById("college"); // 学院
const submit = document.getElementById("submit"); // 制卡按钮
const cardStyle = document.getElementById("cardStyle"); // 卡片
const item = document.querySelectorAll(".item") // 卡片项
submit.onclick = () => {
// TODO 待补充代码
// 1. 姓名验证
const formGroup = document.querySelectorAll('.form-group')
const nameTip = document.getElementById('vail_name')
const regex1 = /^[\u4e00-\u9fa5]{2,4}$/
if (!regex1.test(studentName.value)) {
formGroup[0].classList.add('has-error')
nameTip.style.display = 'block'
return
} else {
formGroup[0].classList.remove('has-error')
nameTip.style.display = 'none'
}
// 2. 学号验证
const studentIdTip = document.getElementById('vail_studentId')
const regex2 = /^[\d]{1,12}$/
if (!regex2.test(studentId.value)) {
formGroup[1].classList.add('has-error')
studentIdTip.style.display = 'block'
return
} else {
formGroup[1].classList.remove('has-error')
studentIdTip.style.display = 'none'
}
item[0].innerText = `姓名：${studentName.value}`
item[1].innerText = `学号：${studentId.value}`
item[2].innerText = `学院：${college.value}`
// 添加 showCard 类显示放大一卡通的动画，请勿删除
cardStyle.classList.add('showCard')
}
</script>
</body>
</html>