用ajax检测的用户注册
2009-05-22 11:37
375 查看
<html>
<head>
<#include "/WEB-INF/includes/top.ftl"/>
<script>
var XMLHttpReq = false;
function createXMLHttpRequest() {
if(window.XMLHttpRequest) {
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("create object fail");
}
}
}
}
function processResponse() {
if (XMLHttpReq.readyState == 4) {
if (XMLHttpReq.status == 200) {
validName();
} else {
alert("请求发生异常,请重试.");
}
}
}
function send(url) {
alert(url);
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processResponse;
XMLHttpReq.send(null);
}
function checkMail(){
var s=document.getElementById("email").value;
var pattern=//w+@/w+/.[a-z]+/;
if(pattern.test(s)){
return true;
}else{
return false;
}
}
function checkPhotoFormat(){
var str = document.getElementById("file").value;
strs=str.toLowerCase();
lens=strs.length;
extname=strs.substring(lens-4,lens);
if(extname==".jpg" || extname==".gif" || extname==".bmp" || extname==".jpeg"){
return true;
}else{
return false;
}
}
function validInfo(){
var errMsg="";
if(document.getElementById("username").value==""){
errMsg="用户名不能为空";
}else if(document.getElementById("password").value==""){
errMsg="口令不能为空";
}else if(document.getElementById("password").value!= document.getElementById("confirm").value){
errMsg="两次输入的口令不匹配";
}else if(document.getElementById("blogname").value==""){
errMsg="你的空间名称不能为空";
}else if(document.getElementById("email").value!=""){
if(!checkMail()){
errMsg="请输入合法的电子邮件地址";
}
}else if(document.getElementById("file").value!=""){
if(!checkPhotoFormat()){
errMsg="请选择正确的图片格式(jpg/jpeg/gif/bmp)";
}
}
if(errMsg!=""){
var errObj=document.getElementById("err");
errObj.innerHTML=errMsg;
return false;
}
document.frm.submit();
}
function f(){
if(document.getElementById("username").value==""){
var errObj=document.getElementById("err");
errObj.innerHTML="请输入一个用户名";
return;
}
var name=document.getElementById("username").value;
var url="validName.do?name="+name;
send(url);
}
function validName(){
var flag=XMLHttpReq.responseText;
var errObj=document.getElementById("err");
if(flag=="no"){
errObj.innerHTML="此用户名已存在，请重新选择";
document.getElementById("username").value="";
}else if(flag=="ok"){
errObj.innerHTML="<font color='green'>恭喜，此用户名可用</font>";
}else{
errObj.innerHTML="请求异常";
}
}
</script>
<style type="text/css">
#Layer1 {
background-color: #87CEEB;
width:264px;
height:10px;
font-size:9pt;
color:#696969
}
#err {
font-size:9pt;
color:red
}
.body{
SCROLLBAR-FACE-COLOR:#F7F7F7;
SCROLLBAR-HIGHLIGHT-COLOR:#FFFFFF;
SCROLLBAR-SHADOW-COLOR:#FFFFFF;
SCROLLBAR-3DLIGHT-COLOR:#D4D0C8;
SCROLLBAR-ARROW-COLOR:#808080;
SCROLLBAR-TRACK-COLOR:#FFFFFF;
SCROLLBAR-DARKSHADOW-COLOR:#D4D0C8;
}
.txt{
background-color: #FFFFFF;
border-top: 1px solid #AFEEEE;
border-right: 1px solid #AFEEEE;
border-bottom: 1px solid #AFEEEE;
border-left: 1px solid #AFEEEE;
}
.btn{
background-color: #FFFFFF;
border-top: 1px solid #C0C0C0;
border-right: 1px solid #C0C0C0;
border-bottom: 1px solid #C0C0C0;
border-left: 1px solid #C0C0C0;
}
a{
font-size:12px;
color:696969;
text-decoration:none;
}
a:hover{
color:#FF0000;
text-decoration:underline
}
</style>
</head>
<body bgcolor="#FFFFFF" class="body">
<table width="500" border=0 align="center" cellpadding=2 cellspacing=1 bordercolorlight=#cccccc bordercolordark=#cccccc bgcolor="#87CEEB" style="FONT-SIZE: 9pt">
<td align="center"><div align="center" id="Layer1">新用户注册</div></td>
<tr align=middle bgcolor="#FFF8DC" bordercolordark="#ffffff" bordercolorlight="#008000">
<td>
<div align="center">
<@ww.form name="frm" action="register.do" method="post" enctype="multipart/form-data" namespace="/">
<div id="err" align="center"> </div>
用户昵称: <input class="txt" type="text" id="username" name="model.username" maxlength="20"> <a href="javascript:f()">检测用户名</a><br><br>
用户口令: <input class="txt" type="password" id="password" name="model.password" size="22" maxlength="20"/> <font color="red">* 此项为必填</font><br><br>
确认口令: <input class="txt" type="password" id="confirm" name="model.confirm" size="22" maxlength="20"/> <font color="red">* 此项为必填</font><br><br>
空间名称: <input class="txt" type="text" id="blogname" name="model.blogName" size="20" maxlength="20"/> <font color="red">* 此项为必填</font><br><br>
性 别: <select class="txt" id="sex" name="model.sex">
<option value="男">-- 男 --</option>
<option value="女">-- 女 --</option>
<option value="保密">-- 保密 --</option>
</select><br><br>
电子邮箱: <input class="txt" type="text" id="email" name="model.email" maxlength="20"/> <font color="green">* 以下为选填</font><br><br>
QQ/MSN: <input class="txt" type="text" name="model.contact" maxlength="20"/> <br><br>
肖像上传: <input class="txt" type="file" id="file" name="file"/><br><br>
随笔:<br><textarea class="txt" name="motto" cols="50" rows="4"></textarea>
</@ww.form>
<input type="button" value="提交注册信息" class="btn" onclick="validInfo()"/>
<div align="right">
<a href="initLogin.do">返回登录</a>
<a href="#">忘记密码?</a>
<div>
</div>
</td>
</tr>
</table>
<br>
<center><#include "/WEB-INF/includes/foot.ftl"/></center>
</body>
</html>
<head>
<#include "/WEB-INF/includes/top.ftl"/>
<script>
var XMLHttpReq = false;
function createXMLHttpRequest() {
if(window.XMLHttpRequest) {
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("create object fail");
}
}
}
}
function processResponse() {
if (XMLHttpReq.readyState == 4) {
if (XMLHttpReq.status == 200) {
validName();
} else {
alert("请求发生异常,请重试.");
}
}
}
function send(url) {
alert(url);
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processResponse;
XMLHttpReq.send(null);
}
function checkMail(){
var s=document.getElementById("email").value;
var pattern=//w+@/w+/.[a-z]+/;
if(pattern.test(s)){
return true;
}else{
return false;
}
}
function checkPhotoFormat(){
var str = document.getElementById("file").value;
strs=str.toLowerCase();
lens=strs.length;
extname=strs.substring(lens-4,lens);
if(extname==".jpg" || extname==".gif" || extname==".bmp" || extname==".jpeg"){
return true;
}else{
return false;
}
}
function validInfo(){
var errMsg="";
if(document.getElementById("username").value==""){
errMsg="用户名不能为空";
}else if(document.getElementById("password").value==""){
errMsg="口令不能为空";
}else if(document.getElementById("password").value!= document.getElementById("confirm").value){
errMsg="两次输入的口令不匹配";
}else if(document.getElementById("blogname").value==""){
errMsg="你的空间名称不能为空";
}else if(document.getElementById("email").value!=""){
if(!checkMail()){
errMsg="请输入合法的电子邮件地址";
}
}else if(document.getElementById("file").value!=""){
if(!checkPhotoFormat()){
errMsg="请选择正确的图片格式(jpg/jpeg/gif/bmp)";
}
}
if(errMsg!=""){
var errObj=document.getElementById("err");
errObj.innerHTML=errMsg;
return false;
}
document.frm.submit();
}
function f(){
if(document.getElementById("username").value==""){
var errObj=document.getElementById("err");
errObj.innerHTML="请输入一个用户名";
return;
}
var name=document.getElementById("username").value;
var url="validName.do?name="+name;
send(url);
}
function validName(){
var flag=XMLHttpReq.responseText;
var errObj=document.getElementById("err");
if(flag=="no"){
errObj.innerHTML="此用户名已存在，请重新选择";
document.getElementById("username").value="";
}else if(flag=="ok"){
errObj.innerHTML="<font color='green'>恭喜，此用户名可用</font>";
}else{
errObj.innerHTML="请求异常";
}
}
</script>
<style type="text/css">
#Layer1 {
background-color: #87CEEB;
width:264px;
height:10px;
font-size:9pt;
color:#696969
}
#err {
font-size:9pt;
color:red
}
.body{
SCROLLBAR-FACE-COLOR:#F7F7F7;
SCROLLBAR-HIGHLIGHT-COLOR:#FFFFFF;
SCROLLBAR-SHADOW-COLOR:#FFFFFF;
SCROLLBAR-3DLIGHT-COLOR:#D4D0C8;
SCROLLBAR-ARROW-COLOR:#808080;
SCROLLBAR-TRACK-COLOR:#FFFFFF;
SCROLLBAR-DARKSHADOW-COLOR:#D4D0C8;
}
.txt{
background-color: #FFFFFF;
border-top: 1px solid #AFEEEE;
border-right: 1px solid #AFEEEE;
border-bottom: 1px solid #AFEEEE;
border-left: 1px solid #AFEEEE;
}
.btn{
background-color: #FFFFFF;
border-top: 1px solid #C0C0C0;
border-right: 1px solid #C0C0C0;
border-bottom: 1px solid #C0C0C0;
border-left: 1px solid #C0C0C0;
}
a{
font-size:12px;
color:696969;
text-decoration:none;
}
a:hover{
color:#FF0000;
text-decoration:underline
}
</style>
</head>
<body bgcolor="#FFFFFF" class="body">
<table width="500" border=0 align="center" cellpadding=2 cellspacing=1 bordercolorlight=#cccccc bordercolordark=#cccccc bgcolor="#87CEEB" style="FONT-SIZE: 9pt">
<td align="center"><div align="center" id="Layer1">新用户注册</div></td>
<tr align=middle bgcolor="#FFF8DC" bordercolordark="#ffffff" bordercolorlight="#008000">
<td>
<div align="center">
<@ww.form name="frm" action="register.do" method="post" enctype="multipart/form-data" namespace="/">
<div id="err" align="center"> </div>
用户昵称: <input class="txt" type="text" id="username" name="model.username" maxlength="20"> <a href="javascript:f()">检测用户名</a><br><br>
用户口令: <input class="txt" type="password" id="password" name="model.password" size="22" maxlength="20"/> <font color="red">* 此项为必填</font><br><br>
确认口令: <input class="txt" type="password" id="confirm" name="model.confirm" size="22" maxlength="20"/> <font color="red">* 此项为必填</font><br><br>
空间名称: <input class="txt" type="text" id="blogname" name="model.blogName" size="20" maxlength="20"/> <font color="red">* 此项为必填</font><br><br>
性 别: <select class="txt" id="sex" name="model.sex">
<option value="男">-- 男 --</option>
<option value="女">-- 女 --</option>
<option value="保密">-- 保密 --</option>
</select><br><br>
电子邮箱: <input class="txt" type="text" id="email" name="model.email" maxlength="20"/> <font color="green">* 以下为选填</font><br><br>
QQ/MSN: <input class="txt" type="text" name="model.contact" maxlength="20"/> <br><br>
肖像上传: <input class="txt" type="file" id="file" name="file"/><br><br>
随笔:<br><textarea class="txt" name="motto" cols="50" rows="4"></textarea>
</@ww.form>
<input type="button" value="提交注册信息" class="btn" onclick="validInfo()"/>
<div align="right">
<a href="initLogin.do">返回登录</a>
<a href="#">忘记密码?</a>
<div>
</div>
</td>
</tr>
</table>
<br>
<center><#include "/WEB-INF/includes/foot.ftl"/></center>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AJAX展现注册用户即时检测的问题..
- SSH框架中用Ajax和jquery检测用户注册名是否重复
- Ajax检测注册用户是否存在
- ajax１.０用户动态检测注册实现（原创）
- ajax１.０用户动态检测注册实现（原创）
- jquery与php交互的ajax应用第一课：检测用户注册时用户名是否存在
- AJAX应用之注册用户即时检测
- Ajax检测注册用户是否存在
- AJAX 之用户注册即时检测
- AJAX应用之注册用户即时检测
- Ajax检测注册用户是否存在
- AJAX应用之注册用户即时检测
- AJAX应用之注册用户即时检测
- AJAX应用之注册用户即时检测
- Ajax检测注册用户是否存在
- ASP+AJAX应用之注册用户即时检测
- ASP+ajax完美实现用户表单检测和注册
- jquery与php交互的ajax应用第一课：检测用户注册时用户名是否存在
- ajax实现检测当前注册用户是否存在
- AJAX应用之注册用户检测