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将另起一篇文章。其中包括本人搜集的一个汇总