自定义jQuery.validator 验证框架,登录验证以及自定义的正则表达式验证 例子亲测通过。。。
<script type="text/javascript">
//修改默认验证规则
jQuery.extend(jQuery.validator.messages, {
required: "请填写本字段",
remote: "验证失败",
email: "请输入正确的电子邮件",
url: "请输入正确的网址",
date: "请输入正确的日期",
dateISO: "请输入正确的日期 (ISO).",
number: "请输入正确的数字",
digits: "请输入正确的整数",
creditcard: "请输入正确的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入指定的后缀名的字符串",
maxlength: jQuery.validator.format("允许的最大长度为 {0} 个字符"),
minlength: jQuery.validator.format("允许的最小长度为 {0} 个字符"),
rangelength: jQuery.validator.format("允许的长度为{0}和{1}之间"),
range: jQuery.validator.format("请输入介于 {0} 和 {1} 之间的值"),
max: jQuery.validator.format("请输入一个最大为 {0} 的值"),
min: jQuery.validator.format("请输入一个最小为 {0} 的值")
});
jQuery.validator.addMethod("ismobile", function(value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
return (length == 11 && mobile.exec(value))? true:false;
}, "请正确填写您的手机号码");
jQuery.validator.addMethod("pas", function(value, element) {
var hh = /([0-9].*([a-zA-Z].*[!$@^&*?#%]|[!$@^&*?#%].*[a-zA-Z])|[a-zA-Z].*([0-9].*[!$@^&*?#%]|[!$@^&*?#%].*[0-9])|[!$@^&*?#%].*([0-9].*[a-zA-Z]|[a-zA-Z].*[0-9]))/;
return (hh.exec(value))? true:false;
}, "密码由字母与数字组合并包含特殊字符(除字母、数字、空格外的字符)并且8位以上!");
$().ready(function() {
$("#form").validate({
rules: {
userName: {
required: true,
maxlength: 20,
remote:{ //验证用户名是否存在
type:"POST",
url:"${pageContext.servletContext.contextPath }/user/isUser", //servlet
data:{
name:function(){return $("#userName").val();}
}
}
},
email: {
email: true,
maxlength:30
},
pwdHash: {
required: true,
minlength: 8,
maxlength:20
},
chinese: {
required: true,
maxlength: 40,
},
roleId:{
required: true,
},
},
messages: {
userName: {
required: "请输入登录号",
maxlength: "登录号不超过20个字符",
remote:"登录号已经存在"
},
email: {
email: "请输入正确的email地址"
},
pwdHash: {
required: "请输入密码",
rangelength: jQuery.format("密码由字母与数字组合并包含特殊字符(除字母、数字、空格外的字符)长度为8-20的字符 ,!")
},
chinese: {
required: "请输入用户姓名!",
},
roleId:{
required: "请选择后台权限",
},
}
});
});
$(document).ready(function(){
$.ajaxSetup ({
cache: false //关闭AJAX相应的缓存
});
$("#form").validate();
});
function goback(){
window.location.href="${pageContext.servletContext.contextPath }/user/list/";
}
function dls(){
var pp= document.getElementById("pwdHash").value;
var hh = /([0-9].*([a-zA-Z].*[!$#%]|[!$#%].*[a-zA-Z])|[a-zA-Z].*([0-9].*[!$#%]|[!$#%].*[0-9])|[!$#%].*([0-9].*[a-zA-Z]|[a-zA-Z].*[0-9]))/;
alert(pp);
alert(hh.test(pp));
}
</script>
<style type="text/css">
input.error { border: 1px solid red; }
label.error {
padding-left: 5px;
color:red;
font-size: 12px;
}
</style>
<table width="100%" border="0" cellspacing="1" cellpadding="3" class="tab_add">
<tr>
<th>*登录号:</th>
<td width="170px">
<input type="text" id="userName" name="userName" οnkeyup="value=value.replace(/[^\w\.\/]/ig,'')"><font color="red">${error}</font>
</td>
<td ><input type="button" class="sub" value="冻结/解冻"/></td>
<th>*姓名:</th>
<td colspan="2">
<input type="text" id="chinese" name="chinese" />
</td>
</tr>
<tr>
<th>*密码:</th>
<td>
<input type="password" id="pwdHash" name="pwdHash" size="21" class="pas"/>
</td>
<td><input type="checkbox" checked="checked"/>登录密码自动修改</td>
<th>手机号码:</th>
<td width="170px">
<input type="text" id="telephone" name="telephone" class="ismobile"/>
</td>
<td><input type="checkbox" name="isSendMessage" value="0"/>登录发送我短信</td>
</tr>
<tr>
<th>密码有效期:</th>
<td colspan="2">
<input type="text" id="pwdDate" name="pwdDate" value="<fmt:formatDate
value="${calendar}" type="both" pattern="yyyy-MM-dd"></fmt:formatDate>" readonly="readonly"/>
</td>
<th>用户属地:</th>
<td colspan="2">
<select name="locate">
<option value="D">国内</option>
<option value="F">国外</option>
</select>
</td>
</tr>
<tr>
<th>电子邮件:</th>
<td colspan="2">
<input type="text" id="email" name="email"/>
</td>
<th>登陆权限:</th>
<td colspan="2"><select name="netType">
<option value="0">内网</option>
<option value="1">外网</option>
<option value="2">内外网</option>
</select></td>
</tr>
<tr>
<th>账号:</th>
<td>
<input type="text" id="loginName" name="loginName" size="8" readonly="readonly" style="background: gray;"/>*自动生成
</td>
<td>
<input type="button" class="sub" value="禁用账号"/>
</td>
<th>后台权限:</th>
<td colspan="2"><select name="roleId">
<option value="">请选择</option>
<c:forEach var="role" items="${roles}">
<option value="${role.roleId}">${role.roleName}</option>
</c:forEach>
</select></td>
</tr>
<tr>
<th>*组织:</th>
<td>
<input type="text" id="orgId" name="orgId"/>
</td>
<td colspan="4">
<input type="button" class="sub" value="选择"/>
</td>
</tr>
<tr>
<th>office号,级别:</th>
<td>
<input type="text" id="office" name="office" size="7"/>
<input type="text" id="levels" name="levels" size="6"/>
</td>
<td>
</td>
</tr>
<tr>
<th>操作员:</th>
<td colspan="2">
<input type="text" id="operId" name="operId" value="admin" readonly="readonly"/>
</td>
<th>操作时间:</th>
<td colspan="2">
<input type="text" id="opTime" name="opTime" readonly="readonly" value="<fmt:formatDate
value="<%=new Date() %>" type="both" pattern="yyyy-MM-dd"/>"/>
</td>
</tr>
<tr>
<th><input type="submit" class="sub" value="保存"/> <input type="button" class="sub" value="返回" οnclick="goback();"/></th>
<td colspan="5"></td>
</tr>
</table>