js.小效果.表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单验证</title>
	</head>
	<body>
		<form action="#" method="post" >
			<div>
				<label for="userName">用户名：</label>
				<input type="text"  name="userName" id="userName" placeholder="请输入6-8位用户名"/>
				<span id="uspan"></span>
			</div>
			<div>
				<label for="password">密码：</label>
				<input type="password"  name="password" id="password" placeholder="请输入密码"/>
				<span id="pspan"></span>
			</div>
			<div>
				<label for="password_again">确认密码：</label>
				<input type="password"  name="password_again" id="password_again" placeholder="请确认密码"/>
				<span id="paspan"></span>
			</div>
			<div>
				<label for="telephone">联系方式：</label>
				<input type="text"  name="telephone" id="telephone" placeholder="请输入手机号码"/>
				<span id="tspan"></span>
			</div>
			<div>
				<label for="email">电子邮箱：</label>
				<input type="text"  name="email" id="email" placeholder="请输入电子邮箱"/>
				<span id="espan"></span>
			</div>
			<div>
				<button type="submit">提交</button>
				<button type="reset">重置</button>
			</div>
		</form>
		<script>
			window.onload = function(){
				var reg_name = /^[A-z0-9]{6,8}$/;
				var reg_psd = /^(?=.*[a-z])(?=.*[A-Z])[A-z0-9]{10,18}$/;
				var reg_tele = /^1[34578]\d{9}$/;
				var reg_email = /^([A-z0-9]+[_|\_|\.]?)*[A-z0-9]+@([A-z0-9]+[_|\_|\.]?)*[A-z0-9]+\.[A-z]{2,3}$/;
				
				var userName = document.getElementById("userName");
				var uspan = document.getElementById("uspan");
				userName.onfocus = function(){
					userName.style.color='#ccc';
				}
				userName.onblur = function(){
					if(userName.value == "" || reg_name.test(userName.value) == false ){
					uspan.innerText = "请输入正确格式的用户名";
					uspan.style.color = "#f00";
					return false;
					}
				}
				
				var psd = document.getElementById("password");
				var pspan = document.getElementById("pspan");
				psd.onfocus = function(){
					userName.style.color='#ccc';
				}
				psd.onblur = function(){
					if(psd.value == "" || reg_psd.test(psd.value) == false ){
					pspan.innerText = "请输入正确格式的密码";
					pspan.style.color = "#f00";
					return false;
					}
				}
				
				var psd_ag = document.getElementById("password_again");
				var paspan = document.getElementById("paspan");
				psd_ag.onfocus = function(){
					pasd.style.color='#ccc';
				}
				psd_ag.onblur = function(){
					if(psd_ag.value == "" || pad_ag.value != psd.value){
					paspan.innerText = "请输入一致的密码";
					paspan.style.color = "#f00";
					return false;
					}
				}
				
				var tele = document.getElementById("telephone");
				var tspan = document.getElementById("tspan");
				tele.onfocus = function(){
					tele.style.color='#ccc';
				}
				tele.onblur = function(){
					if(tele.value == "" || reg_tele.test(tele.value) == false ){
					tspan.innerText = "请输入正确格式的手机号码";
					tspan.style.color = "#f00";
					return false;
					}
				}
				
				var email = document.getElementById("email");
				var espan = document.getElementById("espan");
				email.onfocus = function(){
					tele.style.color='#ccc';
				}
				email.onblur = function(){;
					if(email.value == "" || reg_email.test(email.value) == false ){
					espan.innerText = "请输入正确格式的电子邮箱";
					espan.style.color = "#f00";
					return false;
					}
				}
			}
		</script>
	</body>
</html>
猜你喜欢
