实际项目中比较常用的(JQuery+AJAX+MD5),属于即时验证,亮点是验证用户是否存在的那一项,具体内容如下
具体示例
registe.jsp
<span><%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>注册验证</title>
<script type="text/javascript" src="https://www.jb51.net/article/md5.js"></script>
<script type="text/javascript" src="https://www.jb51.net/jquery-1.3.2.min.js"></script>
<link type="text/css" href="https://www.jb51.net/validator.css"></link>
<script src="https://www.jb51.net/formValidator.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$.formValidator.initConfig({formid:"myform",onerror:function(msg){alert(msg)},onsuccess:function(){
$('#pwd').val(MD5($('#pwd').val()));
return true;
}});
$("#loginname").formValidator({onshow:"请输入用户名",onfocus:"用户名至少3个字符,最多10个字符",oncorrect:"该用户名可以注册"}).inputValidator({min:3,max:10,onerror:"你输入的用户名非法,请确认"})
.ajaxValidator({
type : "post",
url : "account.do?"+Math.random(),
datatype : "text",
success : function(data){
if(data==1){
return false;
} else{
return true;
}
},
buttons: $("#lnbtn"),
error: function(){alert("服务器没有返回数据,可能服务器忙,请重试");},
onerror : "该用户名存在,请更换用户名",
oncorrect:"恭喜你,该用户名可用",
onwait : "正在对用户名进行合法性校验,请稍候..."
});
$("#pwd").formValidator({onshow:"请输入密码",onfocus:"密码不能为空",oncorrect:"密码合法"}).inputValidator({min:3,empty:{leftempty:false,rightempty:false,emptyerror:"密码两边不能有空符号"},onerror:"密码不能为空,请确认"});
$("#confirm_pwd").formValidator({onshow:"请输入重复密码",onfocus:"两次密码必须一致哦",oncorrect:"密码一致"}).inputValidator({min:1,empty:{leftempty:false,rightempty:false,emptyerror:"重复密码两边不能有空符号"},onerror:"重复密码不能为空,请确认"}).compareValidator({desid:"pwd",operateor:"=",onerror:"2次密码不一致,请确认"});
$("#email").formValidator({onshow:"请输入邮箱",onfocus:"邮箱6-100个字符,输入正确了才能离开焦点",oncorrect:"恭喜你,你输对了",defaultvalue:"@"}).inputValidator({min:6,max:100,onerror:"你输入的邮箱长度非法,请确认"}).regexValidator({regexp:"^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",onerror:"你输入的邮箱格式不正确"});
});
function submitForm(){
var pwd = document.getElementById('pwd');
pwd.value = MD5(pwd.value);
return true;
}
</script>
</head>
<body>
<!-- 页头结束 -->
<!-- 广告栏开始 -->
<!-- 广告栏结束 -->
<!-- 主内容开始 -->
<div>
<!-- 注册栏开始 -->
<div>
<div>注册新会员</div>
<div>
<form action="account.do?method=registe" method="post">
<table cellspacing="5" cellpadding="5">
<tr>
<td><span>*</span>会员名:</td>
<td>
<input type="text" tabindex="1" size="30" maxlength="20" />
<input type="button" value="用户名是否可用"/>
</td>
<td><div></div></td>
</tr>
<tr>
<td><span>*</span>密码:</td>
<td><input type="password" tabindex="2" size="30" maxlength="20" /></td>
<td><div></div></td>
</tr>
<tr>
<td><span>*</span>重复密码:</td>
<td><input type="password" tabindex="3" size="30" maxlength="20" /></td>
<td><div></div></td>
</tr>
<tr>
<td><span>*</span>邮件地址:</td>
<td><input tabindex="4" size="30" type="text" /></td>
<td><div></div></td>
</tr>
<tr>
<td colspan="3"><div>-------------------------------- 以 下 为 选 填 项 目 ----------------------------------</div></td>
</tr>
<tr>
<td>真实姓名:</td>
<td><input tabindex="5" size="30" type="text" /> </td>
<td><div></div></td>
</tr>
<tr>
<td>联系电话:</td>
<td><input tabindex="6" size="30" type="text" /> </td>
<td><div></div></td>
</tr>
<tr>
<td>手机号码:</td>
<td><input tabindex="7" size="30" type="text" /> </td>
<td><div></div></td>
</tr>
<tr>
<td>通讯地址:</td>
<td><input tabindex="9" size="35" type="text" /> </td>
<td><div></div></td>
</tr>
<tr>
<td>邮政编码:</td>
<td><input tabindex="10" size="30" type="text" /> </td>
<td><div></div></td>
</tr>
<tr>
<td></td>
<td colspan="2"><input type="submit" tabindex="11" value="提交注册"/></td>
</tr>
</table>
</form>
</div>
</div>
<!-- 注册栏结束 -->
</div>
<!-- 主内容结束 -->
<div></div>
</body>
</html></span>
AccountServlet.java