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

来源:互联网 发布:手机视频监控软件 编辑:程序博客网 时间:2024/05/16 16:14
自定义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" onkeyup="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:formatDatevalue="${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:formatDatevalue="<%=new Date() %>" type="both" pattern="yyyy-MM-dd"/>"/>    </td> </tr>  <tr>    <th><input type="submit" class="sub" value="保存"/>    <input type="button" class="sub" value="返回" onclick="goback();"/></th>    <td colspan="5"></td>  </tr></table>


 

原创粉丝点击