当前位置：首页 > news >正文

实训11 正则表达式

news 2025/11/10 7:45:44

HTML 讲解

<!doctype html> <!-- 声明文档类型为HTML5 -->
<html> <!-- HTML文档的根元素 -->
<head> <!-- 文档头部，包含元数据和引用的外部资源 -->
<meta charset="utf-8"> <!-- 声明字符编码为UTF-8 -->
<title>使用正则表达式校验表单数据的有效性</title> <!-- 页面标题 -->
<style> <!-- 内嵌CSS样式 -->
table{ /* 表格样式 */width:360px; /* 设置表格宽度 */border-collapse:collapse; /* 合并表格边框 */border:1px solid #000; /* 设置表格边框 */
}td{ /* 单元格样式 */font:14px/18px "微软雅黑"; /* 设置字体样式 */padding:4px 8px; /* 设置内边距 */border:1px solid #000; /* 设置单元格边框 */
}</style>
<script type="text/javascript" src="js/validation.js"></script> <!-- 引入外部JavaScript文件 -->
</head>
<body> <!-- 文档主体内容 --><form action="welcome.html"> <!-- 表单定义，提交到welcome.html --><table id="tbl"> <!-- 创建表格 --><tr><td>用户名</td><td><input type="text" name="username" 
id="username"/></td></tr> <!-- 用户名输入行 --><tr><td>密 码</td><td><input type="password" name="psw" id="psw"/></td></tr> <!-- 密码输入行 --><tr><td>身份证号</td><td><input type="text" name="IDC" id="idc"/></td></tr> <!-- 身份证输入行 --><tr><td>email</td><td><input type="text" name="email" id="email"/></td></tr> <!-- 邮箱输入行 --><tr><td>家庭电话</td><td><input type="text" name="tel" id="tel"/></td></tr> <!-- 电话输入行 --><tr><td>手 机</td><td><input type="text" name="mobil" id="mobil"/></td></tr> <!-- 手机输入行 --><tr><td>通讯地址</td><td><input type="text" name="address" 
id="address"/></td></tr> <!-- 地址输入行 --><tr><td>邮 编</td><td><input type="text" name="zip" id="zip"/></td></tr> <!-- 邮编输入行 --><tr><td colspan="2"><input type="submit" value="提交" id='btn'></td></tr> <!-- 提交按钮，横跨两列 --></table></form>
</body>
</html>

“为什么密码字段要使用type=‘password’？”
标准答案：
安全性：用星号或圆点隐藏输入内容，防止旁人窥视
用户体验：明确向用户表明这是敏感信息字段
浏览器功能：触发浏览器的密码管理功能（保存、自动填充）
移动设备优化：在移动端会调出适合密码输入的虚拟键盘
扩展讲解：
“虽然前端显示隐藏了，但传输到服务器时仍然是明文，所以还需要后端加密处理。在实际开发中，我们通常会对密码进行哈希加密后再存储。”
“表格布局和div布局各有什么优缺点？”
表格布局优点：
简单直观，容易实现对齐
兼容性好，在老浏览器中表现一致
适合真正的表格数据展示
表格布局缺点：
语义不准确：表格应用于数据，而非布局
灵活性差：难以实现响应式设计
代码冗余：需要大量tr、td标签
加载性能：需要整个表格加载完才能渲染
可访问性差：屏幕阅读器会按表格语义阅读

div+CSS布局优点：
语义明确，结构清晰
灵活性强，易于实现响应式
代码简洁，易于维护
加载性能更好
SEO友好，可访问性佳

window.onload = function(){ // 页面加载完成后执行var oBtn = document.getElementById('btn'); // 获取提交按钮元素oBtn.onclick = function(){ // 为提交按钮添加点击事件处理函数var flag = true; // 验证标志，初始为true表示通过验证var username = document.getElementById("username"); // 获取用户名输入框var password = document.getElementById("psw"); // 获取密码输入框var idc = document.getElementById("idc"); // 获取身份证输入框var email = document.getElementById("email"); // 获取邮箱输入框var tel = document.getElementById("tel"); // 获取电话输入框var mobil = document.getElementById("mobil"); // 获取手机输入框var address = document.getElementById("address"); // 获取地址输入框var zip = document.getElementById("zip"); // 获取邮编输入框var url = document.getElementById("url"); // 获取URL输入框（但在HTML中不存在）//用户名第一个字符为字母，其他字符可以是字母、数字、下划线等，且长度为3~10个字符var pname = /^[a-zA-Z]\w{2,9}$/;  	//密码可以是任何非空白字符，长度为6~15个字符var ppsw = /\S{6,15}/;//身份证号为15位或18位数字，或17位数字后面跟一个x或X  var pidc = /^\d{15}$|^\d{17}[\d|x|X]$/;  //email包含@，且其左、右两边包含任意多个单词字符，后面则包含至少一个包含.和2~3个单词字符的子串var pemail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; //家庭电话格式为：xxx-xxxxxxx 或 xxxx-xxxxxxxx，其中"x"表示一个数字var ptel = /^\d{3,4}-\d{7,8}$/;//手机为11位数字，且第二数字只能为3、4、5、7或8var pmobil = /^1[3|4|5|7|8]\d{9}$/;//地址可以是任何非空白字符，长度为6~30个字符var paddress = /\S{6,30}/;//邮编为6位数字，其中第1位为1~9中的某个数字，后5位为0~9中的5个数字var pzip = /^[1-9][0-9]\d{4}$/; // 验证用户名if(!pname.test(username.value)){flag = false; // 验证失败，设置标志为falsealert("用户名第一个字符为字母，长度为3~10个字符");}// 验证密码if(!ppsw.test(password.value)){flag = false;alert("密码长度为6~15个非空白字符");}// 验证身份证号if(!pidc.test(idc.value)){flag = false;alert("身份证号为15位或18位，请输入正确的身份证号");}// 验证邮箱if(!pemail.test(email.value)){flag = false;alert("email包含@以及至少一个包含.和2~3个单词字符的子串");}// 验证家庭电话if(!ptel.test(tel.value)){flag = false;alert("家庭电话的格式为xxx/xxxx-xxxxxxx/xxxxxxxx");}// 验证手机if(!pmobil.test(mobil.value)){flag = false;alert("手机手机为11位数字，且第二数字只能为3、4、5、7或8");}// 验证地址if(!paddress.test(address.value)){flag = false;alert("地址长度为6~30个字符");}// 验证邮编if(!pzip.test(zip.value)){flag = false;alert("邮编为6位数字，其中第1位为1~9中的某个数字，后5位为0~9中的5个数字");}//当flag的值为false时，取消提交按钮的默认提交行为if(!flag){return false; // 阻止表单提交}// 如果flag为true，表单会正常提交};
};