自定义jQuery.validator 验证框架，登录验证以及自定义的正则表达式验证

最新推荐文章于 2022-12-09 22:32:12 发布

蓝缘

最新推荐文章于 2022-12-09 22:32:12 发布

阅读量7.2k

点赞数 2

分类专栏： jquery Ajax

本文链接：https://blog.csdn.net/mmm333zzz/article/details/8214654

版权

jquery Ajax 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

自定义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>