jquery的validate插件验证方式

时间:2022-11-30 15:41:43
<%@ page contentType="text/html;charset=UTF-8"%> <%@ include file="/WEB-INF/common/taglibs.jsp"%> <c:set var="ctx" value="${pageContext.request.contextPath}"/> <html> <head> <title>用户编辑</title> <script type="text/javascript" src="<%=path %>/validate/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="<%=path %>/validate/jquery.validate.min.js"></script> <script> $(document).ready(function() { //为inputForm注册validate函数 $("#inputForm").validate({ rules: { dlm: { //返回true和false remote: "${ctx}/hy/checkDlm?oldDlm=" + encodeURIComponent('${hy.dlm}') }, yx: { remote: "${ctx}/hy/checkYx?oldYx=" + encodeURIComponent('${hy.yx}') }, sjhm: { remote: "${ctx}/hy/checkSjhm?oldSjhm=" + encodeURIComponent('${hy.sjhm}') }, sfz: { remote: "${ctx}/hy/checkSfz?oldSfz=" + encodeURIComponent('${hy.sfz}') } }, messages: { dlm: { //返回false后的提示 remote: "登录名已存在" }, yx: { remote: "邮箱已存在" }, sjhm: { remote: "手机号码已存在" }, sfz: { remote: "身份证已存在" } } }); }); function checkData(){ //获取输入身份证号码 var yx = $("#yx").val(); var sjhm = $("#sjhm").val(); var sfz = $("#sfz").val(); var yhm=$("#yhm").val(); var reg = /^([a-zA-Z0-9]+[_|-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|-|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/gi; if(yx!=""&&yx!=null&&!reg.test(yx)){ alert("电子邮箱输入不合法!"); return false; } var telecomMobilePt=/^0{1}[1-9]\d{9,10}$|(13|14|15|18)\d{9}$/; if(!telecomMobilePt.test(sjhm)){ alert("手机号码输入不合法!"); return false; } var sfzstr = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; if(sfz!=""&&sfz!=null&&!sfzstr.test(sfz)){ alert("身份证输入不合法!"); return false; } //判断$("#inputForm").validate是否全部验证通过,全部通过为true,否则为false var r = $("#inputForm").valid(); if(r){ $("#anniu").attr("disabled", true); $("#anniu").val("保存中。。。"); }else{ return false; } return true; } </script> </head> <body> <div class="breadcrumb"> <ul> <li>当前位置</li> <li class="space"></li> <li class="current">会员信息编辑</li> </ul> </div> <div id="form1" class="form module"> <form:form id="inputForm" name = "form3" modelAttribute="hy" action="${ctx}/hy/updateHyKk" method="post" class="form-horizontal" onsubmit="return checkData()"> <input type="hidden" name="id" value="${hy.id}"/> <div class="hd"> <h2 class="t">会员信息</h2> </div> <div class="bd"> <!-- <c:if test="${not empty message}">--> <!-- <script>--> <!-- var msg = '${message}';--> <!-- alert(msg);--> <!-- </script>--> <!-- </c:if>--> <table width="100%" class="f-table"> <!-- <tr>--> <!-- <td width="10%" height="40" align="right">登录名:</td>--> <!-- <td><input type="text" id="dlm" name="dlm" value="${hy.dlm}" class="input" required="true"/></td>--> <!-- </tr>--> <tr> <td width="10%" height="40" align="right">姓&nbsp;&nbsp;&nbsp;&nbsp;名:</td> <td><input type="text" name="yhm" id="yhm" value="${hy.yhm}" class="input" required="true"/></td> </tr> <tr> <td width="10%" height="40" align="right">性&nbsp;&nbsp;&nbsp;&nbsp;别:</td> <td><input name="xb" type="radio" value="男" <c:if test='${empty hy.xb}'> checked </c:if> <c:if test='${hy.xb==\'男\'}'>checked </c:if> /> 男 <input name="xb" type="radio" <c:if test='${hy.xb==\'女\'}'>checked="checked"</c:if> value="女" /> 女</td> </tr> <tr> <td width="10%" height="40" align="right">邮&nbsp;&nbsp;&nbsp;&nbsp;箱:</td> <td><input type="text" id="yx" name="yx" value="${hy.yx}" class="input" /></td> </tr> <tr> <td width="10%" height="40" align="right">手机号码:</td> <td><input type="text" name="sjhm" id="sjhm" value="${hy.sjhm}" class="input" required="true"/></td> </tr> <!--<tr> <td width="10%" height="40" align="right">注册时间:</td> <td><input type="text" name="zcsj" id="zcsj" value="${hy.zcsj}" class="input" required="true"/></td> </tr> <tr> <td width="10%" height="40" align="right">注册类型:</td> <td><input type="text" name="zclx" id="zclx" value="${hy.zclx}" class="input" required="true"/></td> </tr> --> <tr> <td width="10%" height="40" align="right">QQ:</td> <td><input type="text" name="qq" id="qq" value="${hy.qq}" class="input" /></td> </tr> <tr> <td width="10%" height="40" align="right">微&nbsp;&nbsp;&nbsp;&nbsp;信:</td> <td><input type="text" name="weixin" id="weixin" value="${hy.weixin}" class="input" /></td> </tr> <tr> <td width="10%" height="40" align="right">微&nbsp;&nbsp;&nbsp;&nbsp;博:</td> <td><input type="text" name="weibo" id="weibo" value="${hy.weibo}" class="input" /></td> </tr> <tr> <td width="10%" height="40" align="right">身&nbsp;份&nbsp;证:</td> <td><input type="text" name="sfz" id="sfz" value="${hy.sfz}" class="input"/></td> </tr> <tr> <td width="10%" height="40" align="right">卡&nbsp;&nbsp;&nbsp;&nbsp;号:</td> <td><input type="text" name="jykxh" id="jykxh" value="" class="input" required="true"/></td> </tr> <tr> <td width="10%" height="40" align="right">会员卡密码:</td> <td><input type="password" name="jykkm" id="jykkm" value="" class="input" required="true"/></td> </tr> <tr class="last"> <td width="10%" height="40" align="right"></td> <td> <!--onclick="test(this);document.form3.submit()"--> <input type="submit" id="anniu" class="sub btn btn-blue-h20-w2" value="保存" /> <input type="reset" class="btn btn-blue-h20-w2" value="返回" onclick="history.back()"/> </td> </tr> </table> </div> </form:form> </div> </body> </html> 二、默认校验规则 (1)required:true 必输字段 (2)remote:"check.php" 使用ajax方法调用check.php验证输入值 (3)email:true 必须输入正确格式的电子邮件 (4)url:true 必须输入正确格式的网址 (5)date:true 必须输入正确格式的日期 日期校验ie6出错,慎用 (6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性 (7)number:true 必须输入合法的数字(负数,小数) (8)digits:true 必须输入整数 (9)creditcard: 必须输入合法的信用卡号 (10)equalTo:"#field" 输入值必须和#field相同 (11)accept: 输入拥有合法后缀名的字符串(上传文件的后缀) (12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符) (13)minlength:10 输入长度最小是10的字符串(汉字算一个字符) (14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) (15)range:[5,10] 输入值必须介于 5 和 10 之间 (16)max:5 输入值不能大于5 (17)min:10 输入值不能小于10 三、默认的提示 messages: { required: "This field is required.", remote: "Please fix this field.", email: "Please enter a valid email address.", url: "Please enter a valid URL.", date: "Please enter a valid date.", dateISO: "Please enter a valid date (ISO).", dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.", number: "Please enter a valid number.", numberDE: "Bitte geben Sie eine Nummer ein.", digits: "Please enter only digits", creditcard: "Please enter a valid credit card number.", equalTo: "Please enter the same value again.", accept: "Please enter a value with a valid extension.", maxlength: $.validator.format("Please enter no more than {0} characters."), minlength: $.validator.format("Please enter at least {0} characters."), rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."), range: $.validator.format("Please enter a value between {0} and {1}."), max: $.validator.format("Please enter a value less than or equal to {0}."), min: $.validator.format("Please enter a value greater than or equal to {0}.") },