表单验证

表单验证

实现目标：在用户填写表单时，通过JS验证用户输入的格式是否有误并提示。

思路：给每一个input添加一个onblur（失去焦点）事件，和一个span区域（用于显示错误提示信息）。onblur事件里验证格式是否有误，当格式有误时就显示span中的错误提示信息。

表单：

<form method="post" action="./register.do" onsubmit="return validate()">
		<div class="regist">
		
				<!-- 表单 -->
				<div class="regist_main center">
					<div class="username">
						用&nbsp;&nbsp;户&nbsp;&nbsp;名:&nbsp;&nbsp;<input id="username"
							onblur="checkName()" required="required" class="shurukuang"
							type="text" name="username" placeholder="请输入你的用户名" /><span>由5-16位字母或数字组成</span>
					</div>
					<span id="errorpwd" style="color: red; display: none;">用户名不能为空</span>
					<span id="errorpwd0" style="color: red; display: none;">用户名只能包含5-16位字母或数字</span>
					<div class="username">
						密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;<input
							id="p1" onblur="checkPass1()" required="required"
							class="shurukuang" type="password" name="password"
							placeholder="请输入你的密码" /><span>请输入6位以上字符</span>
					</div>
					<span id="errorpwd11" style="color: red; display: none;">请输入至少6位非空白字符</span>
					<div class="username">
						确认密码:&nbsp;&nbsp;<input id="p2" onblur="checkPass2()"
							required="required" class="shurukuang" type="password"
							name="repassword" placeholder="请确认你的密码" /><span>两次密码要输入一致哦</span>
					</div>
					<span id="errorpwd1" style="color: red; display: none;">两次输入密码不一致</span>
					<div class="username">
						邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱&nbsp;&nbsp;<input
							onblur="checkEmail()" id="mail" required="required"
							class="shurukuang" type="email" name="mail"
							placeholder="请填写正确的邮箱" /><span>填写下邮箱地址吧，方便我们联系您！</span>
					</div>
					<span id="errorpwd2" style="color: red; display: none;">邮箱格式有误</span>
				</div>
				
				<!-- 提交按钮 -->
				<div class="regist_submit">
					<input class="submit" type="submit" name="submit" value="立即注册">
				</div>

		</div>
	</form>

JS：

<script type="text/javascript">
	function checkName() {
		var pattern = /^[0-9a-zA-Z]{5,16}$/;
		var name = document.getElementById("username").value;
		if (name == "") {
			document.getElementById("errorpwd0").style.display = "none";
			document.getElementById("errorpwd").style.display = "block";
			return false;
		} else {
			document.getElementById("errorpwd").style.display = "none";
		}
		if (!pattern.test(name)) {
			document.getElementById("errorpwd0").style.display = "block";
			return false;
		} else {
			document.getElementById("errorpwd0").style.display = "none";
			return true;
		}
	}
	function checkPass1() {
		var pwd1 = document.getElementById("p1").value;
		var pattern = /^\S{6,}$/;
		if (!pattern.test(pwd1)) {
			document.getElementById("errorpwd11").style.display = "block";
			return false;
		} else {
			document.getElementById("errorpwd11").style.display = "none";
			return true;
		}
	}
	function checkPass2() {
		var pwd1 = document.getElementById("p1").value;
		var pwd2 = document.getElementById("p2").value;
		if (pwd1 != pwd2) {
			document.getElementById("errorpwd1").style.display = "block";
			return false;
		} else {
			document.getElementById("errorpwd1").style.display = "none";
			return true;
		}
	}
	function checkEmail() {
		var email = document.getElementById("email").value;
		var pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
		if (!pattern.test(email)) {
			document.getElementById("errorpwd2").style.display = "block";
			return false;
		} else {
			document.getElementById("errorpwd2").style.display = "none";
			return true;
		}
	}
	function validate() {
		if (checkName() == false || checkPass1() == false
				|| checkPass2() == false || checkEmail() == false)
			return false;
		else
			return true;
	}
</script>