蓝桥校园一卡通

介绍

每年大一新生报道时，都需要办一张校园一卡通，无论吃饭、洗澡、买东西、甚至去图书馆借书都要用，小蓝想帮助学校做一个制卡界面，但是用 js 做用户输入验证不知道怎么写，快来帮助小蓝完成这个页面吧！

准备

本题已经内置了初始代码，打开实验环境，目录结构如下：

1
2
3
4
5
6
├── css
│   ├── wish.css 
│   └── index.css
├── images   
│   └── college.jpg 
└── index.html

其中：

  • index.html 是主页面。
  • images 是图片文件夹。
  • css 是样式文件夹。

注意：打开环境后发现缺少项目代码，请复制下述命令至命令行进行下载。

1
wget https://labfile.oss.aliyuncs.com/courses/18164/card.zip && unzip card.zip && rm card.zip

在浏览器中预览 index.html 页面，显示如下所示：

图片描述

在初始化的时候输入框并没有做验证，卡片内容也无法正常显示。

目标

请在 index.html 文件中补全代码，具体需求如下：

  1. 完成表单验证：
  • 姓名：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 的元素显示）。
  1. 表单验证通过过后，正确显示卡片。在卡片（class=info）元素下的（class=item）的元素中按照顺序分别显示表单提交的内容：姓名：xxx，学号：xxx, 学院：xxx。

完成后效果如下：

完成效果

规定

  • 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成无法判题通过。
  • 满足需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动检测。

判分标准

  • 本题完全实现题目目标得满分，否则得 0 分。

总通过次数: 1550 | 总提交次数: 1712 | 通过率: 90.5%

难度: 简单 标签: 2022, 省模拟赛, Web 前端, JavaScript

题解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!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>