Web前端校验之jquery.validate(1)

Web前端校验之jquery.validate(一)
先说说前端校验，在做web开发时，用户与后台进行交互是必要的。在交互的过程中引导用户合理的与系统进行交互，有两方面好处：
第一：对于用户来说，增强用户体验，规范用户输入，减少用户盲目输入，从而浪费时间。
第二：对系统而言，减小不规范输入导致服务器的压力，尽量保证用户输入的信息，在提交到服务器时的正确性，避免层层跳转、提交，然后出错，再层层抛出异常，捕获异常，处理异常。可谓“劳民伤财”。
在做表单验证时，可采用jquery.validate插件，刚学的，拿来捋捋:
1、在要校验的页面中引入如下js

<script type="text/javascript" src="${js}/jquery-1.7.1.js"></script><script type="text/javascript" src="${js}/jquery.validate1.9.js"></script><script type="text/javascript" src="${js}/validateAddMethod.js"></script><script type="text/javascript" src="${js}/messages_cn.js"></script>

对上述代码的说明：要用jquery.validate.js进行校验，当然得引入jquery.js,这里我用的是版本1.7.1；jquery.validate.js用的版本是1.9；第三个js是自定义的校验，毕竟插件中的校验不一定完全适用于我们开发中的需求，这种自定义方式比较灵活，可扩展；最后一个js是对校验提示的统一口径。
2、jsp中要校验的form表单如下:

<form action="" id="editForm" name="editForm" method="post"><table><tr><td>用户名称：</td><td><input type="text" name="userAccount"id="userAccount" maxlength="65"/> <span style="color: red">*</span></td></tr><tr><td>用户密码：</td><td><input type="password" name="userPwd"id="userPwd" maxlength="65"/><span style="color: red">*</span></td></tr><tr><td>再次输入密码：</td><td><input type="password" name="userPwda"id="userPwda" maxlength="65"/> <span style="color: red">*</span></td></tr></table></form>

3、校验的js如下：

$(document).ready(function() {$("#editForm").validate( {rules : {userAccount : {required :true, stringCheck :true, byteRangeLength :[1,8], remote:{       url:'${contextPath}/admin/UserAction_validateUserAccount.action',       type:"post",       dateType:"json",   } },userPwd :{required :true, rangelength :[6,16]},userPwda : {required :true, equalTo :"#userPwd"},},errorPlacement : function(error, element) {error.appendTo(element.parent());},focusInvalid :false,onkeyup :false});

上边的代码说明：remote比较特殊，默认传递的参数即为userAccount=$("#userAccount").val()， 这个是jquery.validate自动加参，不用手动修改，若参数名称不是变量名，可以自行修改成：
remote: "url?paramName" + $("#userAccount").val(); 这时校验方法需返回boolean值，例如：userAccount不可用就out.print(false)或userAccount可用就out.print(true);
在这段代码中有该插件内置的验证方式参看其API，以及我们自定义的验证方式，在后边我们都将贴出代码，或者加在附件中。
4、remote校验的后台java代码如下：

//校验用户是否存在public String validateUserAccount() throws Exception{response.setContentType(UserAction.CONTENT_TYPE);PrintWriter out = response.getWriter();String userAccount = request.getParameter("userAccount");String result = "true";if(StringUtils.isNotEmpty(userAccount)){List oldUserList = facadeService.findOldUser(userAccount);if(oldUserList!=null&&oldUserList.size()>0){result = "false";}}out.print(result);return null;}

5、messages_cn.js代码如下：

 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} 的值")});

6、jquery.validate.js的api在附件中，自定义的校验validateAddMethod.js将另起一篇文章。其中包括本人搜集的一个汇总

查看更多 下一篇