在大多数网站上都需要进行账号的注册，而如何使用户输入合法的账号注册信息，就需要用到 Javascript 来进行注册页面各项表单的动态验证。
使用如下 html 框架来进行注册页面的验证：
<!--注册页面.html-->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<script src="form.js"></script>
<body onload="YZM()">
<div align="center">
<h2>注册页面</h2>
<hr>
<form action="163注册页面.html" method="post" onsubmit="return isChecked()">
<table>
<tr>
<td width="150px"><label for="uname">姓名：</label></td>
<td width="400px">
<input type="text" value="" id="uname" alt="用户名" onblur="checkName()">
<span id="uname_span">* 用户名必须是3-5位的汉字</span>
</td>
</tr>
<tr>
<td><label for="pwd">密码：</label></td>
<td>
<input type="password" value="" id="pwd" alt="密码" onblur="checkPwd()">
<span id="pwd_span">* 密码至少8位以上</span>
</td>
</tr>
<tr>
<td><label for="phone">手机号：</label></td>
<td>
<input type="text" maxlength="11" id="phone" alt="手机号" onblur="checkPhone()">
<span id="phone_span"></span>
</td>
</tr>
<tr>
<td><label for="email">邮箱：</label></td>
<td>
<input type="email" id="email" alt="邮箱" onblur="checkEmail()">
<span id="email_span"></span>
</td>
</tr>
<tr>
<td>性别 :</td>
<td>
<label for="man">男 :</label>
<input type="radio" name="sex" id="man" value="0" onclick="checkSex()">
<label for="woman">女 :</label>
<input type="radio" name="sex" id="woman" value="1" onclick="checkSex()">
<span id="sex_span"></span>
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" id="sing"><label for="sing">唱歌</label>
<input type="checkbox" id="sleep"><label for="sleep">睡觉</label>
<input type="checkbox" id="lol"><label for="lol">LOL</label>
<br>
<input type="checkbox" id="travel"><label for="travel">旅游</label>
<input type="checkbox" id="golf"><label for="golf">高尔夫</label>
<input type="checkbox" id="basketball"><label for="basketball">篮球</label>
</td>
</tr>
<tr>
<td>籍贯：</td>
<td>
<select id="address" onblur="checkAddress()">
<option value="0">~请选择~</option>
<option value="1">湖南</option>
<option value="2">湖北</option>
<option value="3">广东</option>
</select>
<span id="address_span"></span>
</td>
</tr>
<tr>
<td><label for="yzm">验证码</label></td>
<td>
<input type="number" id="yzm" onblur="checkYZM()">
<span id="yzm_span"></span>
<span id="yzm_span2"></span>
</td>
</tr>
<tr>
<td><label for="it">个人介绍：</label></td>
<td><textarea name="introduce" id="it" cols="30" rows="10"></textarea></td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" id="agree" onclick="submitEnable()">
<label for="agree">是否同意本公司协议</label>
</td>
</tr>
</table>
<p><input type="submit" id="submit" value="注册" disabled="true"></p>
</form>
</div>
</body>
</html>
表单验证 Javascript 完整代码：
// form.js
//生成验证码
function YZM() {
//产生4位随机数
var ran = Math.floor(Math.random()*9000 + 1000);
var span = document.getElementById('yzm_span');
span.innerText = ran;
}
//用户名校验
function checkName() {
var reg = /^[\u4e00-\u9fa5]{3,5}$/; // 用户名必须是3-5位的汉字
return check("uname", reg);
}
//密码校验
function checkPwd() {
var reg = /^\w{8,}$/; // 密码至少8位
return check("pwd", reg);
}
//手机号校验
function checkPhone() {
var reg = /^\d{11}$/; // 手机号为11位
return check("phone", reg);
}
//邮箱校验
function checkEmail() {
var reg = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
return check("email", reg);
}
function check(id, reg) {
var element = document.getElementById(id);
var val = element.value;
var span = document.getElementById(id+'_span');
var alt = element.alt;
if (val === "") {
span.innerText = "× "+alt+"不能为空";
span.style.color = "red";
return false;
} else if (reg.test(val)) {
span.innerText = "√ "+alt+"合法";
span.style.color = "green";
return true;
}
else {
span.innerText = "× "+alt+"不合法";
span.style.color = "red";
return false;
}
}
//性别校验
function checkSex() {
var sex = document.getElementsByName("sex");
var span = document.getElementById("sex_span");
for (var i in sex) {
if (sex[i].checked) {
span.innerText = "性别选择成功";
span.style.color = "green";
return true;
}
}
span.innerText = "请选择性别";
span.style.color = "red";
return false;
}
//籍贯校验
function checkAddress() {
var val = document.getElementById("address").value;
var span = document.getElementById("address_span");
if (val === "0") {
span.innerText = "请选择籍贯";
span.style.color = "red";
return false;
} else {
span.innerText = "籍贯选择成功";
span.style.color = "green";
return true;
}
}
//验证码输入校验
function checkYZM() {
var yzm_span = document.getElementById("yzm_span2");
var yzm = document.getElementById("yzm_span").innerText;
var yzm_input = document.getElementById("yzm").value;
if (yzm_input === yzm) {
yzm_span.innerText = "√ 验证码输入正确";
yzm_span.style.color = "green";
return true;
} else if(yzm_input === "") {
yzm_span.innerText = "× 请输入验证码";
yzm_span.style.color = "red";
}
else {
yzm_span.innerText = "× 验证码输入错误";
yzm_span.style.color = "red";
return false;
}
}
function submitEnable() {
var agreeCheck = document.getElementById("agree");
var submit = document.getElementById("submit");
submit.disabled = !agreeCheck.checked;
}
//检查是否所有都是成功验证
function isChecked() {
return checkName() && checkPwd() && checkSex() && checkPhone() && checkEmail() && checkAddress() && checkYZM();
}
Tips：以上只是一个基本的验证框架，可根据需要自己进行修改。