jquery.validationEngine

xdwangiflytek

浏览: 675301 次
性别:
来自: 安徽

最近访客更多访客>>

fighter1945

meg_yin

xiaohei445_qq

ddxkj

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Js/Jquery

JQuery 验证 validationEngine

在项目中表单的验证的选择是 JQuery.validationEngine 倒是一个不错的选择，无论在 Java or .NET 上都还不错，可以满足一般表单提交验证的需求，但是通过这个项目做的发现有时候怎么都想不起比如说下拉框怎么用 validationEngine 进行验证，所以今天想想还是好好总结总结吧，免得犯怂。下载地址：

http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

先说一下使用的基本流程

1 、引用 Jquery 的 js 库和 validationEngine 的 js 和 css

<script type="text/javascript" src="./js/jquery-1.8.3.min.js"/>
<script type="text/javascript" src="./js/jquery.validationEngine.js"/>
<script type="text/javascript" src="./js/jquery.validationEngine-cn.js"/>
<link type="text/css" rel="stylesheet" href="./css/validationEngine.jquery.css"/>

其中的 css 可以指定不同的语言的，在我们下载下来的文件中存在很多语言，我们在实际的项目开发中可以根据实际的情况选择。

2 、需要验证的页面在初始化时对验证插件进行初始化

	$(function() {
		//表单验证
		$("#fromId").validationEngine({
			validationEventTriggers : "keyup blur",
			promptPosition : "centerRight",
			success : false,
			failure : function() {
			}
		});
	});

说明：

·上面的 fromId 表示需要验证的表单 id ；

· validationEventTriggers 则指定验证触发的事件，默认是鼠标失去焦点（ blur ）时触发验证，我们可以删除这个属性；

· inlineValidation 表示是否即时验证， false 为提交表单时验证 , 默认 true ；

· promptPosition 表示验证出错的提示信息显示的位置（相对于验证标签的位置，包括 topLeft, topRight, bottomLeft, centerRight, bottomRight ）；

· success : 为 true 时即使有不符合的也提交表单 ,false 表示只有全部通过验证了才能提交表单 , 默认 false ；

· failure : function() { alert(" 验证失败，请检查。 "); } 表示验证失败时调用的函数；

· success : function() { callSuccessFunction() }, 表示验证通过时调用的函数，这两个回调一般在开发中都不需要写的；

3 、下面就是针对不同的标签进行验证，验证规则是写在表单元素的 class 属性内，例如

<input type="text" id="stuId" name="stuname"value=""
class="validate[required,custom[SpecialCharacters]] " />

所有的验证规则写在 validate[] 内，有多种验证，用逗号隔开。注意这里需要指定 id ，如果不指定 id ，页面会有黑色输入框提示。

4 、在表单进行提交时判断验证是否通过，如果验证没有错，表示可以提交，否则 return ，开始使用时很多人会忘记这里，导致验证报错还是提交到后台了。

	function submitForm() {
		if ($.validationEngine.submitValidation("#fromId") == false) {
			$("#fromId").submit();
		}
	}

Ok ，一个表单验证需要做的准备工作完成了，下面我再来对不同的标签的验证方式进行一个简单的总结，其实直接从文档上就可以发现，这里只是简单的总结一下。

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script type="text/javascript" src="./res/js/jquery-1.8.2.js">
	
</script>
<script type="text/javascript" src="./res/js/jquery.validationEngine1.7.js">
	
</script>
<script type="text/javascript"
	src="./res/js/jquery.validationEngine-cn.js">
</script>
<link type="text/css" rel="stylesheet"
	href="./res/css/validationEngine.jquery.css" />

<title>JQuery Validation 1.7 Demo</title>
<script type="text/javascript">
	$(function() {
		//表单验证
		$("#formId").validationEngine({
			validationEventTriggers : "keyup blur",
			promptPosition : "centerRight",
			success : false,
			failure : function() {
			}
		});
	});
	function submitForm() {
		if ($.validationEngine.submitValidation("#fromId") == false) {
			$("#fromId").submit();
		}
	}
	function deletePop(){
		$.validationEngine.closePrompt('.formError',true);
	}
	
</script>
<style type="text/css">
	div{
		margin-bottom: 20px;
	}
</style>

</head>
<body>
	<form id="formId"  class="formular" action="result.jsp" method="post">
		<div>
			验证输入框的必填、只允许字母、特殊字符、长度，这里就不对日期进行验证了，因为日期我们一般都使用JQuery组件不会有格式错误的<br /> 
			<input type="text" id="input"
				class="validate[required,length[1,3],custom[onlyLetter],custom[SpecialCharacters]] text-input"><br>
				
			邮箱验证<br/>
			<input type="text" name="email" id="email" class="validate[required,custom[email]] text-input"/><br>
			
			Telephone<br/>
			<input class="validate[required,custom[telephone]] text-input" type="text" name="telephone"  id="telephone" />
		</div>
		
		<div>
			复选框验证，这里验证最少选择两个<br/>
			<input class="validate[minCheckbox[2]] checkbox" type="checkbox" name="interest" id="maxcheck1"/>
			<label for="maxcheck1">唱歌</label>
			<input class="validate[minCheckbox[2]] checkbox" type="checkbox" name="interest" id="maxcheck2"/>
			<label for="maxcheck2">跳舞</label>
			<input class="validate[minCheckbox[2]] checkbox" type="checkbox" name="interest" id="maxcheck3"/>
			<label for="maxcheck3">电脑</label>
		</div>
		
		<div>
			下拉框验证<br/>
			<select name="language" id="language" class="validate[required,mustSelect[无]]">
				<option value="无">Please Select</option>
				<option value="Java">Java</option>
				<option value="NET">NET</option>
				<option value="Android">Android</option>
			</select>
		</div>
		
		<div>
			两次输入是否一致验证<br/>
			 <input class="validate[required,length[6,11]]" type="password" name="password" id="password" /><br/>
			 <input class="validate[required,confirm[password]]" type="password" name="repassword"  id="repassword" />      
		</div>
		
		<div>
			textarea验证<br/>
		  <textarea class="validate[required,length[6,300]] text-input" name="comments" id="comments"> </textarea>  
		</div>
		
		<div>
			<input type="button" onclick="$.validationEngine.buildPrompt('.hand','这是我手动添加','error')" value="手动添加一个提示"><br/>
			<input type="text" class="hand">
		</div>
		
		<div>
			<input type="button" onclick="$.validationEngine.loadValidation('#date')" value="手动再次触发验证"><br/>
			<input class="validate[required,custom[date]] text-input" type="text" name="date"  id="date" />
		</div>
		
		<div>
			说明：以上只是说了一下项目中常用的验证，具体的可以查看下载的JS库里包含的Demo以及jquery.validationEngine-cn.js里包含的正则验证规则
		</div>
		<input type="button" onclick="deletePop()" value="删除所有提示">
		<input type="button" onclick="submitForm()" value="保存">
	</form>
</body>
</html>

说明：

1、这里的 checkbox 提示显示位置还没有好的办法解决；

2 、这里需要注意的是不同的版本对应的 jquery.validationEngine.js 和 jquery.validationEngine-cn.js 需要对应，比如有的版本中的密码两次输入是否一致有的是 confirm 而有的是 equals ，无论是哪一个，上面两个 js 都必须要统一，不能一个是 confirm 一个是 equals ；

注意这里面以新版本 2.6 来说吧，老版本有的地方可能不一样

1 、 2.6 版本中的输入框验证多个时，会同时显示多个错误，直到没有错误，而 1.7 中没有

2 、下拉框的选择， 2.6 的方式时

<select name="language" id="language" class="validate[required]">
				<option value="">- Please Select -</option>
				<option value="Java">Java</option>
				<option value="NET">NET</option>
				<option value="Android">Android</option>
			</select>

而1.7的方式是

<select name="language" id="language" class="validate[mustSelect[无]]">
				<option value="无">- Please Select -</option>
				<option value="Java">Java</option>
				<option value="NET">NET</option>
				<option value="Android">Android</option>
			</select>

项目中的感受，在项目中引入需要的 JS 库 or Jar 包时最好自己手动去官网下载，然后引入，不要上来就直接引入上一个项目中用到的 JS 库 or Jar 包。因为一来这样我们自己可以更加熟悉这些 JS 库 or Jar 包，二来直接引入上一个项目中的可能对其源码进行了特定条件下的修改或者版本过低。

分享到：

用iframe模拟ajax上传文件 | 多文件上传 by MultipartFile and Multip ...

2012-12-04 09:07
浏览 4015
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论