JS中简易的表单验证

要求

表单验证：
(1)用户名不能为空
(2)用户名必须在6-14位之间
(3)用户名只能由数字和字母组成，不能含有其它符号(正则表达式)
(4)密码和确认密码一致，邮箱地址合法。
(5)统一失去焦点验证
(6)错误提示信息统一在span标签中提示,并且要求字体12号,红色。
(7)文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清宝文本框的value
(8)最终表单中所有项均合法方可提交

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span {
				color: red;
				font-size: 12px;
			}
		</style>
  </head>
	<body>
		<script type="text/javascript">
			window.onload = function(){
				//获取name文本框id
				var nameElt = document.getElementById("name");
				//获取name的span的id
				var nameSpan = document.getElementById("nameSpanArea");
				
				//获取密码框的id
				var pwdElt = document.getElementById("pwd");
				//获取密码的span的id
				var pwdSpan = document.getElementById("pwdSpanArea");
				
				//获取确认密码框的id
				var pwd2Elt = document.getElementById("pwd2");
				//获取确认密码的span的id
				var pwd2Span = document.getElementById("pwd2SpanArea");
				
				//获取邮箱地址框的id
				var emailElt = document.getElementById("email");
				//获取邮箱地址的span的id
				var emailSpan = document.getElementById("emailSpanArea");
				
				/*给用户名文本框绑定失去焦点事件*/
				nameElt.onblur = function(){
					//获取用户名
					var name = nameElt.value;
					//去除前后空格
					name = name.trim();
					//使用正则表达式判断格式
					var nameRegExp = /^(?=.*\d)(?=.*[a-zA-Z]).{4,16}$/; 
					var ok = nameRegExp.test(name);
					if (name === "") {
						nameSpan.innerText = "用户名不能为空！";
					} else if(ok){
						nameSpan.innerText = "格式正确";
					} else{
						nameSpan.innerText = "格式错误，用户名必须在6-14位之间且只能由数字和字母组成";
					}
				}
				/*给用户名文本框绑定获得焦点事件*/
				nameElt.onfocus = function(){
					//格式错误的话在获得焦点时清空name文本框
					if(nameSpan.innerText == "格式错误，用户名必须在6-14位之间且只能由数字和字母组成"){
						nameElt.value = "";
					}
					//获得焦点时清空name的span
					nameSpan.innerText = "";
				}
				
				/*给密码文本框绑定失去焦点事件*/
				pwdElt.onblur = function(){
					//获取密码
					var pwd = pwdElt.value;
					//去除前后空格
					pwd = pwd.trim();
					if (pwd === "") {
						pwdSpan.innerText = "密码不能为空！";
					} else{
						pwdSpan.innerText = "";
					}
				}
				/*给密码文本框绑定获得焦点事件*/
				pwdElt.onfocus = function(){
					//格式错误的话在获得焦点时清空密码文本框
					if(pwdSpan.innerText == "密码不能为空！"){
						pwdElt.value = "";
					}
					//获得焦点时清空pwd的span
					pwdSpan.innerText = "";
				}
				
				/*给确认密码文本框绑定失去焦点事件*/
				pwd2Elt.onblur = function(){
					//获取密码
					var pwd2 = pwd2Elt.value;
					//去除前后空格
					pwd2 = pwd2.trim();
					if (pwd2 === "") {
						pwd2Span.innerText = "密码不能为空！";
					} else if(pwdElt.value == pwd2Elt.value){
						pwd2Span.innerText = "密码一致";
					} else {
						pwd2Span.innerText = "密码不一致";
					}
				}
				/*给确认密码文本框绑定获得焦点事件*/
				pwd2Elt.onfocus = function(){
					//格式错误的话在获得焦点时清空pwd2文本框
					if(pwd2Span.innerText == "密码不一致"){
						pwd2Elt.value = "";
					}
					//获得焦点时清空pwd2的span
					pwd2Span.innerText = "";
				}
				
				/*给邮箱文本框绑定失去焦点事件*/
				emailElt.onblur = function(){
					//获取密码
					var email = emailElt.value;
					//去除前后空格
					email = email.trim();
					//使用正则表达式判断格式
					var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; 
					var crctEmail = emailRegExp.test(email);
					if (email === "") {
						emailSpan.innerText = "邮箱不能为空！";
					} else if(crctEmail){
						emailSpan.innerText = "格式正确";
					} else {
						emailSpan.innerText = "格式错误";
					}
				}
				/*给邮箱文本框绑定获得焦点事件*/
				emailElt.onfocus = function(){
					//格式错误的话在获得焦点时清空email文本框
					if(emailSpan.innerText == "格式错误"){
						emailElt.value = "";
					}
					//获得焦点时清空email的span
					emailSpan.innerText = "";
				}
				
				/*给提交按钮绑定onclick事件*/
				var submitBtnElt = document.getElementById("submitBtn");
				submitBtnElt.onclick = function(){
					/*手动触发所有文本框的focus和blur，避免空提交*/
					nameElt.focus();nameElt.blur();
					
					pwdElt.focus();pwdElt.blur();
					
					pwd2Elt.focus();pwd2Elt.blur();
					
					emailElt.focus();emailElt.blur();
					
					if (nameSpan.innerText == "格式正确" && pwdSpan.innerText == "" &&
					pwd2Span.innerText == "密码一致" && emailSpan.innerText == "格式正确") {
						submitBtnElt.type = "submit";
						/*第二种方法：
						给form表单加上一个id(id="userform")
						var userFormElt = document.getElementById("userform");
						//提交表单
						userFormElt.submit();
						*/
					} else{
						alert("填写数据有误，请重新检查后再提交！");
					}
				}
			}
		</script>
		<!--这里应该使用post，为了方便检测，改为get-->
		<form action="http://localhost:8080/jd/save" method="get">
			请输入用户名：<input type="text" id="name" />
			<span id="nameSpanArea"></span><br />
			请输入密码：<input type="password" id="pwd"/>
			<span id="pwdSpanArea"></span><br />
			请确认密码：<input type="password" id="pwd2"/>
			<span id="pwd2SpanArea"></span><br />
			请确认邮箱地址：<input type="email" id="email" />
			<span id="emailSpanArea"></span><br />
			<input type="button" value="提交" id="submitBtn" />
			<input type="reset" value="重置" />
		</form>
	</body>
</html>