题目：
完成一个注册表单校验功能,其中用户名必须是汉字,超度不超过4， 密码必须是字母构成,长度不超过10,两次密码一致.年龄必须是数字,而且在1-99之间，爱好至少选择一个 否则不提交表单 并提示
参考程序：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作业</title>
</head>
<body>
<div style="text-align: center;">
表单
<hr>
<form action="https://www.baidu.com" onsubmit="return checkForm()">
用户名: <input type="text" id="account" onblur="checkAccount()">
<p id="msg1" style="display: inline;color: red;"></p>
<br>
密码: <input type="text" id="psw1" onblur="checkPwd()">
<p id="msg2" style="display: inline;color: red;"></p>
<br>
再次输入密码: <input type="text" id="psw2" onblur="checkPwd2()">
<p id="msg3" style="display: inline;color: red;"></p>
<br>
年龄: <input type="text" id="age" onblur="checkAge()">
<p id="msg4" style="display: inline;color: red;"></p><br>
爱好: <input type="checkbox" name="hobby" value="写程序" onblur="getSelectValue()">写程序
<input type="checkbox" name="hobby" value="看书" onblur="getSelectValue()">看书
<input type="checkbox" name="hobby" value="打游戏" onblur="getSelectValue()">打游戏
<p id="msg5" style="display: inline;color: red;"></p><br>
<br>
<input type="reset" value="重置">
<input type="submit" value="提交">
</form>
<button onclick="getSelectValue()">测试</button>
</div>
</body>
<script>
function checkForm() {
if(isOk()){
alert("表单提交成功！")
return true;
}else{
alert("请检查表单内容！")
return false;
}
}
// 检查复选框
function getSelectValue() {
var arr = [];
var ck = document.getElementsByName("hobby");
for (let i = 0; i < ck.length; i++) {
if (ck[i].checked) {
arr.push(ck[i].value)
}
}
if (arr.length == 0) {
document.getElementById("msg5").innerText="爱好至少选择一个"
}else{
return true;
}
}
// 检查用户名
function checkAccount() {
var account = document.getElementById("account").value;
var r = /^[\u4e00-\u9fa5]{1,4}$/;
if (r.test(account)) {
return true;
} else {
document.getElementById("msg1").innerText = "用户名必须为汉字且长度不超过4"
}
}
// 校验密码位数
function checkPwd() {
var r = /^\d{1,10}$/;
var pwd = document.getElementById("psw1").value;
if (r.test(pwd)) {
return true;
} else {
document.getElementById("msg2").innerText = "密码不超过10位"
}
}
// 验证二次密码输入
function checkPwd2() {
var pwd1 = document.getElementById("psw1").value;
var pwd2 = document.getElementById("psw2").value;
if (pwd1 == pwd2) {
return true;
} else {
document.getElementById("msg3").innerText = "两次输入的密码不一致"
}
}
// 验证年龄范围
function checkAge() {
var age = parseInt(document.getElementById("age").value);
var r = /^(100|[1-9]\d|\d)$/;
if (r.test(age)) {
return true;
}
else {
document.getElementById("msg4").innerText = "年龄应在1-99"
}
}
// 检查是否可提交
function isOk(){
if(getSelectValue()&&checkAccount()&&checkPwd()&&checkPwd2()&&checkAge()){
return true;
}else{
return false;
}
}
</script>
</html>
测试：
当输入不同的值，失去焦点是会自动校验数据
当所用需要填写的东西都没有错的时候才能提交成功
总结：
在上面的程序中，通过使用正则表达式，可以更方便做数据校验，大大简化了手写逻辑校验的过程