JS注册页面的校验

<script type="text/javascript" >
	
	function jiance(inputid){
		//获取失去焦点的标签的值
		var lost=document.getElementById(inputid);
		var value=lost.value;
		//如果值为空,display改成block
		if(value==""){
			//获取失去焦点的标签的提示语句的id,我设置是标签叫xx,提示语叫xxnull
			var idnull=inputid+"null";
			//获取idnull的标签
			var idnullElement=document.getElementById(idnull);
			idnullElement.style.display="inline";
			
		}else{
			//如果不为空,则隐藏
			//获取失去焦点的标签的提示语句的id
			var idnull=inputid+"null";
			//获取这个标签
			var idnullElement=document.getElementById(idnull);
			//更改display的值
			idnullElement.style.display="none";	
		}
	}
	//只有一个确认密码要调用这个功能,所以里面直接写死,不传参数了
	function mima(){
		
		var pwd= document.getElementById("pwd").value;
		var apwd= document.getElementById("apwd").value;
		if(apwd!=pwd){

			var apwdcuo=document.getElementById("apwdcuo");
			apwdcuo.style.display="inline";
		}else{
			var apwdcuo=document.getElementById("apwdcuo");
			apwdcuo.style.display="none";
		}
	}

	//email只有一个地方调用,也写死
	//函数名写成email不能调用
	function youxiang(){
		//获取值
		var youxiang=document.getElementById("email").value;
		if(!/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(youxiang)){
			var emailcuo=document.getElementById("emailcuo");
			emailcuo.style.display="block";
		}else{
			var emailcuo=document.getElementById("emailcuo");
			emailcuo.style.display="none";
		}
	}
</script>

<body>

<div>
	<form action="#" method="get">
		<table border="0px" bgcolor="white">
			<!--顶部留白-->
			<tr>
				<td height="45px"></td>
			</tr>
			<!--会员注册-->
			<tr>
				<td id="tdhuiyuan">会员注册</td>
				<td colspan="2"><font face="微软雅黑">USER REGISTER</font></td>
			</tr>
			<!--用户名-->
			<tr>
				<td colspan="2">用户名:</td>
			
			<td>
				<input id="id" name="id" type="text" onblur="jiance('id')"/>
			</td>
			<td><span id="idnull" style="display: none;">用户名不能为空</span></td>
		</tr>
		<!--密码-->
		<tr>
			<td>密码:</td>
			<td colspan="2">
				<input id="pwd" name="pwd" type="text" onblur="jiance('pwd')"/>
			</td>
			<td><span id="pwdnull" style="display: none;">密码不能为空</span></td>
		</tr>
		<!--确认密码-->
		<tr>
			<td>确认密码:</td>
			<td colspan="2">
				<input id="apwd" name="apwd" type="text" onblur="mima()"/>
			</td>
			<td><span id="apwdcuo" style="display: none;">两次密码输入不一致</span></td>
		</tr>
		<!--email-->
		<tr>
			<td>邮箱:</td>
			<td colspan="2">
				<input id="email" name="email" type="text" onblur="youxiang()"/>
			</td>
			<td id="emailcuo" style="display: none;">邮箱格式不正确</td>
		</tr>		
		<!--姓名-->
		<tr>
			<td>姓名:</td>
			<td colspan="2">
				<input name="name" type="text"/>
			</td>
		</tr>
		<!--性别-->
		<tr>
			<td>性别:</td>
			<td colspan="2">
				男<input type="radio" name="sex" checked="checked"/>
				女<input type="radio" name="sex"/>
			</td>
		</tr>
		<!--出生日期-->
		<tr>
			<td>出生日期:</td>
			<td colspan="2">
				<input name="borthday" type="date" />
			</td>
		</tr>
		<!--验证码-->
		<tr>
			<td>验证码:</td>
			<td colspan="2">
				<input id="yzm" name="yzm" type="text" />
			</td>
			<td>
				<input type="image" src="../img/captcha.jhtml" />
			</td>
		</tr>
		<!--提交-->
		<tr>
			<td colspan="3" align="center">
				<input id="inputzhuce" type="submit" value="注册" />
			</td>

		</tr>
	</table>
</form>
</div>

			
</body>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_44063001/article/details/87732441