javaweb 实现注册界面并实时验证
上次写的重装系统搞丢了
这次还是备份一下吧
<%@ 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"> 格式示例：xxxxxxxx@163.com</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>```
