js表单验证

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}	
ul{list-style:none;}
ul li{margin-top: 10px;}
.mo{font-size:14px;color:#CCC;background:url('images/mo.gif') no-repeat;padding-left:20px;margin-left: 20px;}
.ok{font-size:14px;color:green;background:url('images/ok.gif') no-repeat;padding-left:20px;margin-left: 20px;}
.no{font-size:14px;color:red;background:url('images/no.gif') no-repeat;padding-left:20px;margin-left: 20px;}
</style>
</head>
<body>

<form action="1.php">
<ul>
	<li>账户：<input id="userName" type="text"><span id="userInfo"></span></li>
	<li>年龄：<input id="age" type="text"><span id="ageInfo"></span></li>
	<li>邮箱：<input id="email" type="text"><span id="emailInfo"></span></li>
	<li><input type="submit" value="提交"></li>
</ul>	
</form>

<script>
	// 获取账户 inpput 对象	
	var User = document.getElementById('userName');
	var userInfo = document.getElementById('userInfo');
	// 账户获取焦点
	User.onfocus = function(){
		userInfo.className = 'mo';
		userInfo.innerHTML = '不以数字开头的数字字母下划线,4到10';
	}
	

	// 账户失去焦点  验证
	User.onblur = function(){
		// 用正则验证用户的信息
		if(User.value.match(/^[A-z][0-9A-z_]{3,9}$/)){
			userInfo.className = 'ok';
			userInfo.innerHTML = '输入正确';
		}else{
			userInfo.className = 'no';
			userInfo.innerHTML = '格式不正确';
		}
	}



	// 获取年龄 inpput 对象	
	var Age = document.getElementById('age');
	var ageInfo = document.getElementById('ageInfo');
	// 年龄获取焦点
	Age.onfocus = function(){
		ageInfo.className = 'mo';
		ageInfo.innerHTML = '必须是0到150的数字 ';
	}


	// 年龄失去焦点  验证
	Age.onblur = function(){
		// 用正则验证用户的信息  
		if(Age.value.match(/^\d+$/) && Age.value>0 && Age.value<=150){
			ageInfo.className = 'ok';
			ageInfo.innerHTML = '输入正确';
		}else{
			ageInfo.className = 'no';
			ageInfo.innerHTML = '格式不正确';
		}
	}


	// 获取邮箱 inpput 对象	
	var Email = document.getElementById('email');
	var emailInfo = document.getElementById('emailInfo');
	// 年龄获取焦点
	Email.onfocus = function(){
		emailInfo.className = 'mo';
		emailInfo.innerHTML = '请输入正确的邮箱格式';
	}


	// 年龄失去焦点  验证
	Email.onblur = function(){
		// 用正则验证用户的信息  
		if(Email.value.match(/^[A-z0-9_]+@[A-z0-9]+\.[A-z]+$/)){
			emailInfo.className = 'ok';
			emailInfo.innerHTML = '输入正确';
		}else{
			emailInfo.className = 'no';
			emailInfo.innerHTML = '格式不正确';
		}
	}



</script>
	
</body>
</html>
posted @ 2016-08-22 09:14 多幸运1号阅读(249) 评论(0) 收藏举报
刷新页面返回顶部
Dream

js表单验证

公告
