javaweb 实现注册界面并实时验证

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ffgcc/article/details/83004531

上次写的重装系统搞丢了
这次还是备份一下吧

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<style>
	p1{
		color:red;
	}
</style>
</head>
<script type="text/javascript">
	function checkuser(){
	    
		var ch=true;
		var red=document.getElementById("1");
		var t1=document.getElementById("user").value;
		if(t1.length<3||t1.length>5)
		{
			red.style.color="red";
			ch=false;
		}
		else
			red.style.color="green";
		return ch ;
	}
	function checkpass(){
		var ch =true;
		var red2=document.getElementById("2");
		var t2=document.getElementById("pass").value;
		if(t2.length<8||t2.length>12)
		{
			red2.style.color="red";
			ch=false;
		}
		else
			red2.style.color="green";
		return ch;
	}
	function checkpass1(){
		var ch=true;
		var red3=document.getElementById("3");
		var t3=document.getElementById("pass1").value;
		var t2=document.getElementById("pass").value;
		if(t2!=t3)
		{
			red3.style.color="red";
			ch=false;
		}
		else
			red3.style.color="green"
		return ch;
	}	
	function checkemail(){
		var ch =true;
		var red4=document.getElementById("4");
		var t4=document.getElementById("em").value;
    	var a =t4.indexOf("@");
    	var b= t4.indexOf(".");
    	if(a==-1||b==-1||b<a)
    	{
    		red4.style.color="red"
    		ch=false;
    	}
    	else
    		red4.style.color="green"
    	return ch;
	}
	function checkpnumber(){
		var ch=true;
    	var red5=document.getElementById("5");
		var t5=document.getElementById("pnumber").value;
		if(t5.length==11)
			red5.style.color="green";
		else
		{
			red5.style.color="red";
			ch=false;
		}
		return ch;
	}
	function checksheng(){
	    var check; 
	    var red=document.getElementById("7");
	    if(document.getElementById("shengfen").selectedIndex == 0)
	      {
	    	red.style.color="red";
	        check = false; 
	      }else{
	        red.style.color="green";
	        check = true; 
	      }
	    return check;  
	}
	function checkrname(){
		var ch=true;
		var a =document.getElementById("rname").value;
		var red=document.getElementById("6"); 
        if(a.length<2||a.length>5){  
			red.style.color="red";
			ch=false;
        }
		else 
			red.style.color="green";
		return ch;
	}
	function checkoption(){
		var ch=false;
		var len =document.getElementByName("hobby").length;
		for( i=0;i<len;i++){
			if(document.getElementsByName('hobby')[i].checked){
				ch=true;
			}
		}
		if(ch!=true){
			alert("请选择技术方向");
		}
			
		return ch;
	}
	function check(){
	        if(checkuser()&&checkpass()&&checkpass1()&&checkemail&&checkpnumber()&&checksheng()&&checkrname()&&checkoption())
	        	return true ;
	        else 
	        	return false;
	}
</script>
<body>
	<form  id="form"  method="get" action="1.jsp" onsubmit="return check()" >
		<table >
			<tr>
			<td align="right"> <p1>*</p1>用户名:</td>
			<td> <input type="text"  id="user" onchange="checkuser()" style="width:170px;"/></td>
			<td align="left" id="1"> 用户名由3-5个字符组成</td>
			</tr>
			<tr>
			<td align="right"> <p1>*</p1>密码:</td>
			<td> <input type="password" id="pass" onchange="checkpass()" style="width:170px;"/></td>
			<td align="left" id="2"> 请输入8-12位密码</td>
			</tr>
			<tr>
			<td align="right"> <p1>*</p1>确认密码:</td>
			<td> <input type="password" id="pass1" onchange="checkpass1()" style="width:170px;"/></td>
			<td align="left" id="3"> 两次密码不一致</td>
			</tr>
			<tr>
			<td align="right"> <p1>*</p1>Email:</td>
			<td> <input type="email" id="em" onchange="checkemail()"style="width:170px;"/></td>
			<td align="left" id="4"> 格式示例:[email protected]</td>
			</tr>
			<tr>
			<td align="right"> <p1>*</p1>手机号码:</td>
			<td> <input type="number" id="pnumber" onchange="checkpnumber()"style="width:170px;"/></td>
			<td align="left" id="5"> 格式示例:13803780000</td>
			</tr>
			<tr>
			<td align="right"> <p1>*</p1>真实姓名:</td>
			<td> <input type="text" id="rname" onchange="checkrname()"style="width:170px;"/></td>
			<td align="left" id="6"> 由2-5个中文组成</td>
			</tr>
			<tr>
			<td align="right"> <p1>*</p1>省份 :</td>
			<td align="left"> 
			<select id="shengfen" onchange="checksheng()">
			<option name ="shen" value ="v3">--请选择--</option>
			<option name="shen" value ="v1">河南</option>
			<option name ="shen" value ="v2">山东</option>
			</select>
			</td>
			<td id="7" >请选择省份</td>
			
			</tr>
			<tr>
			<td align="right"> <p1>*</p1>技术方向:</td>
			<td colspan="2" ">
			<input name="hobby" type="radio" value="v1" onchange="checkoption()"/>java
			<input name="hobby" type="radio" value="v2"onchange="checkoption()"/>php
			<input name="hobby" type="radio" value="v3"onchange="checkoption()"/>.Net
			<input name="hobby" type="radio" value="v4"onchange="checkoption()"/>网页
			<input name="hobby" type="radio" value="v5"onchange="checkoption()"/>IOS
			<input name="hobby" type="radio" value="v6"onchange="checkoption()"/>Android
			</td>
			</tr>
			<tr>
			<td colspan="3" align="center">
			<input type="submit" name="bt1"  value="注册"/>
			<input type="reset" name="bt2" value="重置"/>
			</td>
			</tr>
		</table>
	</form>
</body>

</html>```

猜你喜欢

转载自blog.csdn.net/ffgcc/article/details/83004531