jquery表单验证

浏览数：40 / 时间：2015年06月09日

1、首先需要导入js包和css包：http://download.csdn.net/detail/l294333475/7816951

2、index.jsp（测试页面）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>jquery验证</title>
    
    <script src="<%=basePath%>js/jquery-1.11.1.min.js"></script>
    <script src="<%=basePath%>js/validate/jquery.validationEngine.js"></script>
	<script src="<%=basePath%>js/validate/jquery.validationEngine-zh_CN.js"></script>
	<script src="<%=basePath%>js/validate/validate.js"></script>
	
	<link rel="stylesheet" href="<%=basePath%>js/validate/validationEngine.jquery.css" type="text/css"></link>
  	<link rel="stylesheet" href="<%=basePath%>js/validate/template.css" type="text/css"></link>
  </head>
  
  <body>
  		<div style="margin-top: 100px"></div>
  		<form id="checkInfoForm" action="" method=""><!-- 此处的id可以自己设定，在validate.js中修改 -->
  			姓名：<input type="text" class="validate[required]">
  			年龄：<input type="text" class="validate[required],min[1],max[100],custom[integer]">
  			英文名称：<input type="text" class="validate[required,custom[onlyLetterSp]]">
  			WEB域名：<input type="text" class="validate[required,custom[url]]">
  			组织机构代码：<input type="text" class="validate[required,custom[orgNum]]">
  			<br><br><br><br><br>
  			联系方式：<input type="text" class="validate[required,custom[phone]]">
  			身份证号：<input type="text" class="validate[required,custom[personalCard]]">
  			电子邮件：<input type="text" class="validate[required,custom[email]]">
  			邮政编码：<input type="text" class="validate[required,maxSize[6],custom[onlyNumberSp]]">
  		</form>
  </body>
</html>

validate.js:（可根据自己要求修改）

$(document).ready(function() {
	
	/**
     * 确认信息验证
     */
	jQuery("#checkInfoForm").validationEngine();
	
	/**
	 * 自定义信息验证
	 */
	
	jQuery("#applyForm").validationEngine({
		'custom_error_messages': {
			'#txtKeyNum': {
				'min': {
					'message': "请至少输入一把电子钥匙数量"
				}
			},
			'#fileSeal': {
				'required': {
					'message': "请上传一个印章图片文件"
				}
			},
			'#fileSign': {
				'required': {
					'message': "请上传一个签名图片文件"
				}
			}
		}
	});
	
    

});