jquery.validationEngine

最新推荐文章于 2025-06-10 10:51:14 发布

转载最新推荐文章于 2025-06-10 10:51:14 发布 · 80 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zenple/p/4684346.html

文章标签：

#ui #javascript #ViewUI

本文详细介绍了如何在网页中引入jQuery和validationEngine库，并通过设置表单元素的class和id来实现基本的表单验证功能，包括必填项、数据类型校验、最小选择项数等。

引入库文件

<!DOCTYPE html>
<head>
	<!--jQuery-->
	<script type="text/javascript" charset="utf-8" src="/System/UI/jquery/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="/System/UI/jquery-ui/1.8.14/js/jquery-ui-1.8.14.custom.min.js"></script>
	<link rel="stylesheet" href="/System/UI/jquery-ui/1.8.14/css/smoothness/jquery-ui-1.8.14.custom.css" />

	<!--validationEngine-->
	<script type="text/javascript" charset="utf-8" src="/System/UI/jquery.validationEngine/2.2.4/js/languages/jquery.validationEngine-ZH_CN.js"></script>
	<script type="text/javascript" charset="utf-8" src="/System/UI/jquery.validationEngine/2.2.4/js/jquery-ecmc-validationEngine.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/System/UI/jquery.validationEngine/2.2.4/css/validationEngine.jquery.css" />
</head>

必要条件：1.为Form设置class.2.为检查标记设置id.

<form id="frm" action="" class="ecmc_Form_NeedValidation">

实例

<!--必填-->
<input type="text" id="txt1" class="validate[required]"/>
<input type="text" id="txt2" class="validate[required,custom[number]]"/>

<!--数字-->
<input type="text" id="txt3" class="validate[custom[number]]"/>

<!--日期-->
<input type="text" id="txt4" class="validate[custom[date]]"/>

<!--至少选1,组元素name要相同-->
<input type="checkbox" name="Group" id="chk1" value="1" class="validate[minCheckbox[1]]"/>1
<input type="checkbox" name="Group" id="chk2" value="2" class="validate[minCheckbox[1]]"/>2

<!--自定义-->
<script type="text/javascript">
var fnCheck = function(){
	return "error info";
}
</script>
<input type="text" id="txt5" class="validate[funcCall[fnCheck]]"/>

事件

<script type="text/javascript">
$(document).ready(function(){
	//validation后,submit前事件
	$("#frm1").validationEngine("addActionAfterValidation",function(r){
		if(!r) return false;
		return confirm("检查已通过,是否要提交");
	});
});
</script>

转载于:https://www.cnblogs.com/zenple/p/4684346.html