<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'register.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<style>
ur{
list-style-type:none;
margin:20px 0 0 20px;
}
ul li{
list-style-type:none;
padding:10px;
}
#list{
position:absolute;
top:50px;
left:480px;
}
.input{
width:170px;
height:20px;
}
body{
background-image:url("images/bg0.jpg");
background-position:90% 0%;
background-repeat:no-repeat;
}
</style>
<body>
<div id="list" >
<hr color="blue" size="7"/>
<form name = "form0" method="post" onsubmit = "return checkInfo()">
<p align="center"><font size = "+3" color = "red" ><span id = "errorinf"></span>${info}</font></p>
<ul>
<li style="position: relative;left:26%"><font size="+3" face="楷体">用户注册</font></li>
<li>用 户 名：<input type = "text" id = "name" class = "input" name = "user" onkeyup="test()" /><font color="red"><span id = "sp"></span></font></li>
<li>昵 称：<input type = "text" id = "mname" class = "input" name = "mmname" onblur="checkMname()"/><font color="red"><span id = "mnameInfo"></span></font></li>
<li>密 码：<input type = "password" id = "pass" class = "input" name = "pass" onblur="checkPass()"/><font color="red"><span id = "passInfo"></span></font></li>
<li>确认密码：<input type = "password" id = "rpassword" class = "input" name = "repass" onblur="checkRepass()"/><font color="red"><span id = "repass"></span></font></li>
<li>密保问题：<select name="question">
<option id = "q1" value="您小学校长是谁？">您小学校长是谁？</option>
<option id = "q2" value="您初中校长是谁？">您初中校长是谁？</option>
<option id = "q3" value="您高中校长是谁？">您高中校长是谁？</option>
<option id = "q4" value="您印象最深的事是哪件？">您印象最深的事是哪件？</option>
<option id = "q5" value="您最喜欢的偶像是哪位？">您最喜欢的偶像是哪位？</option>
</select>
</li>
<li>答 案：<input type = "text" class = "input" name = "answer" id = "answer"></li>
<li> <input type = "submit" value = "提交"> <input type = "reset" value = "重置"></li>
</ul>
</form>
</div>
</body>
<script type="text/javascript">
//创建一个XMlHttpRequest对象
var xhr;
//根据不同内核的浏览器创建对应的XMLHttpRequest对象
function createXHR(){
//判断浏览器内核是IE还是其他(火狐,opera,netscape,charme..)
if(window.ActiveXObject){
//创建基于IE的XMLHttpRequest对象
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
//创建基于其他支持XMLHttpRequest的对象
xhr = new XMLHttpRequest();
}else{
alert("该浏览器不支持XMLHttpRequest对象");
}
}
//页面端请求的方法(事件)
function test(){
createXHR();
var name = document.getElementById("name").value;
var url = "ReValidateServlet?username="+name;
//建立对服务器的调用.
//三个参数分别代表,:1.提交方式(GET,POST),2.请求的地址(URL),3是否使用异步提交(true,false)
xhr.open("GET",url,true);
//回调函数(接收服务响应的信息),回调函数不能带()
xhr.onreadystatechange = goCallback;
//发送请求
xhr.send(null);
}
//回调函数(当客户端请求状态发生改变的时候调用)
function goCallback(){
//客户端的请求状态
//0=为初始化，1=加载中,2=已加载，3=交互中，4=完成
if(xhr.readyState==4){
//服务器相应给客户端的转态码200表示OK,404表示资源未找到
if(xhr.status==200){
//接收服务器端响应的信息
var msg = xhr.responseText;
writerMsg(msg);
}
}
}
//将服务器反馈的信息输出页面到指定位置
function writerMsg(msg){
var sp = document.getElementById("sp");
sp.innerHTML=msg;
}
function checkName(){
var name = document.getElementById("name").value;
var infoname = document.getElementById("userInfo");
var exeEmail=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(name.length < 1)
{
infoname.innerHTML = "用户名不能为空,请输入";
}
else if(!exeEmail.exec(name))
{
infoname.innerHTML="用户名格式不正确";
}
}
function checkMname(){
var mname = document.getElementById("mname").value;
var mnameInfo = document.getElementById("mnameInfo");
if(mname.length < 1){
mnameInfo.innerHTML = "昵称不能为空";
}else if(mname.length > 12){
mnameInfo.innerHTML = "长度不能超过12";
}
}
function checkPass(){
var password = document.getElementById("pass").value;
var passInfo = document.getElementById("passInfo");
var pass = /^[A-Za-z0-9]+$/;
if(password.length < 1){
passInfo.innerHTML = "不能为空";
}else if(!pass.test(password)){
passInfo.innerHTML = "只能是数字.字母";
}
}
function checkRepass(){
var pass = document.getElementById("pass").value;
var rpass = document.getElementById("rpassword").value;
var repass = document.getElementById("repass");
if(rpass.length < 1){
repass.innerHTML = "请确认密码";
}else if(rpass != pass)
{
repass.innerHTML = "两次密码不一致";
}
}
function checkInfo(){
var inf = document.getElementById("errorinf");
var user = document.getElementById("name").value;
var username = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
if(user.length<1){
inf.innerHTML = "用户名不能为空,注册失败";
return false;
}else if(!username.test(user)){
inf.innerHTML = "用户名格式不对,注册失败";
return false;
}
var mname = document.getElementById("mname").value;
if(mname.length < 1){
inf.innerHTML = "昵称不能为空,注册失败";
return false;
}else if(mname.length > 12){
inf.innerHTML = "昵称长度不能超过12，注册失败";
return false;
}
var password = document.getElementById("pass").value;
var pass = /^[A-Za-z0-9]+$/;
if(password.length < 1){
inf.innerHTML = "密码不能为空，注册失败";
return false;
}else if(!pass.test(password)){
inf.innerHTML = "密码只能是数字或字母，注册失败";
return false;
}
var rpass = document.getElementById("rpassword").value;
if(rpass.length < 1){
inf.innerHTML = "未再次输入密码，注册失败";
return false;
}else if(rpass != password)
{
inf.innerHTML="两次密码不一致，请重新输入";
return false;
}
var form = document.form0;
form.action = "RegisterServlet";
form.submit();
}
var pre_scrollTop=0;//滚动条事件之前文档滚动高度
var pre_scrollLeft=0;//滚动条事件之前文档滚动宽度
var obj_th;
window.onload =function () {
pre_scrollTop=(document.documentElement.scrollTop || document.body.scrollTop);
pre_scrollLeft=(document.documentElement.scrollLeft || document.body.scrollTop);
obj_th=document.getElementById("th");
};
window.onscroll = function(){
if(pre_scrollTop != (document.documentElement.scrollTop || document.body.scrollTop)){
//滚动了竖直滚动条
pre_scrollTop=(document.documentElement.scrollTop || document.body.scrollTop);
if(obj_th){
obj_th.style.top=(document.documentElement.scrollTop || document.body.scrollTop)+"px";
}
}
else if(pre_scrollLeft != (document.documentElement.scrollLeft || document.body.scrollLeft)){
//滚动了水平滚动条
pre_scrollLeft=(document.documentElement.scrollLeft || document.body.scrollLeft);
}
};
</script>
</html>
1 个解决方案
#1
该回复于2011-11-14 08:59:13被版主删除
#1
该回复于2011-11-14 08:59:13被版主删除