javascript注册页面焦点

最新推荐文章于 2023-11-19 23:55:54 发布

cdcdhj

最新推荐文章于 2023-11-19 23:55:54 发布

阅读量199

点赞数

分类专栏： javascript学习日记文章标签： javascript

本文链接：https://blog.csdn.net/cdcdhj/article/details/117265663

版权

javascript学习日记专栏收录该内容

150 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script language="javascript" src="./shijian.js"></script>
	</head>
	<body>
		<div id="reg">
			<label>用户名：<input id="user" name="user" type="text" /><span></span></label><br/>
			<label>密码：<input id="pwd" name="pwd" type="password" /><span></span></label><br/>
			<label>确认密码：<input id="pwd2" name="pwd2" type="password" /><span></span></label><br/>
			<label>手机号码：<input id="tel" name="tel" type="text" maxlength='11'/><span></span></label><br/>
			<label>电子邮件：<input id="email" name="email" type="text" /><span></span></label><br/>
			<label>QQ号码：<input id="qq" name="qq" type="text" /><span></span></label><br/>
			<label><button id="sub" type="submit">提交</button>&nbsp;&nbsp;<button id="res" type="reset">重置</button></label>	
		</div>
		<script language="javascript">
			EventUtil.addHandler(window,'load',addblur($('user')));
			EventUtil.addHandler(window,'load',addblur($('pwd')));
			EventUtil.addHandler(window,'load',addblur($('pwd2')));
			EventUtil.addHandler(window,'load',addblur($('tel')));
			EventUtil.addHandler(window,'load',addblur($('email')));
			EventUtil.addHandler(window,'load',addblur($('qq')));
			function $(obj){
				return document.getElementById(obj);
			}
			function addblur(obj){
				EventUtil.addHandler(obj,'blur',isEmpty);
			}
			function isEmpty(){
				if(this.value==''){
					this.nextElementSibling.innerHTML='不能为空';
					this.style.backgroundColor="lightblue";
				}else{
					e=EventUtil.getEvent(event);
					target=EventUtil.getTarget(e);
					if(target===user){
						if(!/^\w*$/.test(target.value.trim())){
							target.focus();
							target.style.backgroundColor='red';
							target.nextElementSibling.innerHTML='只能是数字或字母';
						}else if(target.value.trim().length<4||target.value.trim.lenght>13){
							target.focus();
							target.style.backgroundColor='red';
							target.nextElementSibling.innerHTML='请填写４-13个字符';
						}else{
							target.style.backgroundColor='white';
							target.nextElementSibling.innerHTML='正确';
						}
					}
					if(target===pwd){
						if(/^(\d*|[a-z]*)$/.test(target.value.trim())){
							target.focus();
							target.style.backgroundColor='red';
							target.nextElementSibling.innerHTML='不能只是纯数字或字母';
						}else if(target.value.trim().length<7||target.value.trim().length>20){
							target.focus();
							target.style.backgroundColor='red';
							target.nextElementSibling.innerHTML='介于6-20个字符';
						}else{
							target.style.backgroundColor='white';
							target.nextElementSibling.innerHTML='正确';
						}
					}
					if(target===pwd2){
						if(target.value.trim()!=document.getElementById('pwd').value){
							target.focus();
							target.style.backgroundColor='red';
							target.nextElementSibling.innerHTML='两次密码不一致';
						}else{
							target.style.backgroundColor='white';
							target.nextElementSibling.innerHTML='正确';
						}
					}
					if(target==tel){
						if(!/^(13|14|15|16|17|18|19)\d{9}$/.test(target.value.trim())){
							target.focus();
							target.style.backgroundColor='red';
							target.nextElementSibling.innerHTML='电话填写不正确';
						}else{
							target.style.backgroundColor='white';
							target.nextElementSibling.innerHTML='正确';
						}
					}
				}
			}
		</script>
	</body>
</html>