jQuery Validation Engine 表单验证
注意事项：
1.演示版本为 v2.2.4；
2.v2.0 以下的版本参数并不完全通用；
对 validationEngine.jquery.css 文件进行修改，修改如下：
1.提示内容字体改为宋体；
2.去除中各浏览器的私有属性（各浏览器已经支持圆角和阴影，不再需要加私有属性）。
对 jquery.validationEngine.js 文件进行修改，修改如下：
1.将 312 行的 field.focus(); 注释掉，当有输入控件在 Table 内部时，验证会导致回到顶部的现象；
对 jquery.validationEngine-zh_CN.js 文件进行修改，修改如下：
1.修改部分提示文字；
2.增加两个对中文字符的验证规则：minSizeCN 和 maxSizeCN；
3.去除 "validate2fields": {"alertText":"* 请输入 HELLO"},
将以上两个JS文件进行合并
查看 Demo
修改版：jQuery Validation Engine v2.2.4 中文版
原 版：jQuery Validation Engine v2.2.4
【options 参数说明】（可选）
| 名称 | 默认值 | 说明 |
|---|---|---|
| validationEventTrigger | "blur" | 触发验证的事件，支持事件可参考 jQuery 的事件说明。 PS：如果希望只在表单提交时验证，可以设置为空。 |
| scroll | true | 屏幕自动滚动到第一个验证不通过的位置 |
| focusFirstField | true | 验证未通过时，是否给第一个不通过的控件获取焦点 |
| promptPosition | "topRight" | 验证提示信息的位置，可设置为："topRight", "bottomLeft", "centerRight", "bottomRight" |
| autoPositionUpdate | false | 是否自动调整提示层的位置 |
| bindMethod | "bind" | 验证事件的绑定方式，可设置为：bind, live PS：设置 live 似乎绑定事件无效，但是表单提交时能验证，建议不修改。[Demo] |
| binded | false | 是否已经绑定其他事件，设为 true 将不进行验证。 |
| inlineAjax | false | |
| ajaxFormValidation | false | 使用 Ajax 验证表单 |
| ajaxFormValidationURL | false | 设置 Ajax 验证的 URL，默认使用 form 的 action 属性 |
| ajaxValidCache | {} | |
| onAjaxFormComplete | $.noop | 表单提交，Ajax 验证完成后的行为（Function）[Demo] |
| onBeforeAjaxFormValidation | $.noop | 表单提交验证规则通过后，Ajax 验证之前的行为（Function）[Demo] |
| onValidationComplete | false | 表单提交验证完成时的行为（Function） 可以得到两个参数：表单元素 和 验证结果（ture or false）[Demo] |
| onSuccess | false | 实时验证所有项目都通过时，发生的行为（Function）[Demo] |
| onFailure | false | 实时验证有未通过项目时，发生的行为（Function）[Demo] PS：onSuccess 和 onFailure 在禁用实时验证时无效。例如 validationEventTrigger 设为空，或 bindMethod 设为 live |
| isOverflown | false | 表单是否在溢出滚动的元素内（即外部元素设置了 overflow:scroll） PS：设置为 ture 后，提示内容的插入位置将更改为在验证的控件之前插入； 此时需要在控件外层再套一个元素，并设置 class="inputContainer" |
| overflownDIV | "" | 设置了溢出滚动的元素，格式为 jQuery 的选择器。 |
| showArrow | true | |
| isError | false | |
| InvalidFields | [] |
【使用方法】
载入 CSS 文件
rel="stylesheet" href="css/validationEngine.jquery.css"> 载入 JavaScript 文件
src="js/jquery.validationEngine.js">
src="js/jquery.validationEngine-zh_CN.js">
给表单加上 ID
id="form_id" ...>
...
给控件加上 ID 及 设置验证类型
id="test_1" name="test_1" type="text" class="validate[required]">
id="test_2" name="test_2" type="checkbox" class="validate[required]">
id="test_3" name="test_3" class="validate[required]">>
设置验证
// 直接调用
$("#form_id").validationEngine();
// 自定义参数调用
$("#form_id").validationEngine("attach",{
promptPosition:"centerRight",
scroll:false
});
【验证类型】
| 名称 | 示例 | 说明 |
|---|---|---|
| required | validate[required] | 表示必填项 |
| optional | validate[optional] | 表示可选项。若不输入，不要求必填，若有输入，则验证其是否符合要求。 |
| dateRange[name] | validate[dateRange[grp1]] | 验证日期范围 |
| dateTimeRange[name] | validate[dateTimeRange[grp1]] | 验证日期及时间范围 |
| minSize[int] | validate[minSize[6]] | 最少输入字符数 |
| maxSize[int] | validate[maxSize[20]] | 最多输入字符数 |
| groupRequired[name] | validate[groupRequired[grp2]] | 群组中至少输入一项 |
| min[int] | validate[min[1]] | 最小值（该项为数字的最小值，注意与 minSize 的区分） |
| max[int] | validate[max[9999]] | 最大值（该项为数字的最大值，注意与 maxSize 的区分） |
| past[date] | validate[past[2012/12/20]] | 日期必需在 date 或 date 的未来。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now |
| future[date] | validate[future[now]] | 日期必须在 data 或 date 的过去。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now |
| maxCheckbox[int] | validate[maxCheckbox[2]] | 最多选取的项目数（用于Checkbox） |
| minCheckbox | validate[minCheckbox[2]] | 最少选取的项目数（用于Checkbox） |
| equals | validate[equals[id]] | 当前控件值需与 id 这个控件的值相同 |
| phone | validate[custom[phone]] | 验证电话号码 |
| validate[custom[email]] | 验证 Email 地址 | |
| integer | validate[custom[integer]] | 验证整数 |
| number | validate[custom[number]] | 验证数字 |
| date | validate[custom[date]] | 验证日期，格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D |
| dateFormat | validate[custom[dateFormat]] | 验证日期格式，格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D |
| dateTimeFormat | validate[custom[dateTimeFormat]] | 验证日期及时间格式，格式为：YYYY/MM/DD hh:mm:ss AM|PM |
| ipv4 | validate[custom[ipv4]] | 验证 ipv4 地址 |
| url | validate[custom[url]] | 验证 url 地址，需以 http://、https:// 或 ftp:// 开头 |
| onlyNumberSp | validate[custom[onlyNumberSp]] | 只接受填数字和空格 |
| onlyLetterSp | validate[custom[onlyLetterSp]] | 只接受填英文字母（大小写）和单引号(') |
| onlyLetterNumber | validate[custom[onlyLetterNumber]] | 只接受数字和英文字母 |
| ajax | validate[ajax[ajaxUserCallPhp]] | 在验证规则中自定义 "ajaxUserCallPhp":{ "url":"phpajax/ajaxValidateFieldUser.php", "extraData":"name=eric", "alertTextOk":"* 此帐号名称可以使用", "alertText":"* 此名称已被其他人使用", "alertTextLoad":"* 正在确认帐号名称是否有其他人使用，请稍等。" } |
| funcCall | validate[funcCall[functionName]] | 调用外部函数 |
【API 方法】
| 名称 | 示例 | 说明 |
|---|---|---|
| attach | $("#form_id").validationEngine("attach"); | 注册表单验证事件 |
| detach | $("#form_id").validationEngine("detach"); | 取消注册表单验证事件 |
| validate | alert($("#form_id").validationEngine("validate")); | 验证表单，返回结果 true 或 false |
| validateField | alert($("#form_id").validationEngine("validateField","#element_id")); | 验证单个控件，返回结果 true 或 false |
| showPrompt | $("#element_id").validationEngine("showPrompt","提示内容","load"); | 在该元素上创建一个提示内容，3 种状态："pass", "error", "load" |
| hidePrompt | $("#element_id").validationEngine("hidePrompt"); | 隐藏该元素的提示内容 |
| hide | $("#form_id").validationEngine("hide"); | 关闭表单中的提示 |
| hideAll | $("#form_id").validationEngine("hideAll"); | 关闭页面上得所有提示 |
| updatePromptsPosition | $("#form_id").validationEngine("updatePromptsPosition") | 更新提示层的位置 |
validationEngine中文版 — jquery强大的表单验证插件
中文汉化版，官方只有英文的。同时根据中国国情修改了部分验证规则。这个插件支持大部分的浏览器，但由于有使用到了css3的阴影和圆角样式，所以在IE浏览器下无法看到圆角和阴影效果（万恶的IE）。
官方下载地址：http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
普通验证的例子：http://www.position-relative.net/creation/formValidator/
ajax验证的例子：http://www.position-relative.net/creation/formValidator/demoSubmit.html
一：简单说明下使用教程：
引入jquery和插件js、css
- <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />
- <script src="js/jquery.js" type="text/javascript">script>
- <script src="js/jquery.validationEngine-en.js" type="text/javascript">script>
- <script src="js/jquery.validationEngine.js" type="text/javascript">script>
jquery.validationEngine-en.js是语言文件，所有的提示都在这个文件找的到，可以很方便的转成其他语言，同时你也可以在这个文件内定制属于自己的验证规则。
初始化插件
- $(document).ready(function() {
- $("#formID").validationEngine()
- })
验证规则是写在表单元素的class属性内。比如下面：
- <input value="" class="validate[required,custom[noSpecialCaracters],length[0,20],ajax[ajaxUser]]" type="text" name="user" id="user" />
验证规则非常多样，基本上包含了所有的数据类型的验证。
所有的验证规则写在validate[]内，有多种验证，用逗号隔开，这里简要说明下常用的验证规则。
- required：值不可以为空
- length[0,100] ：文字允许长度
- confirm[fieldID] ：匹配其他的表单元素的值，fieldID就是其他表单元素的id，这个主要用于再次确认密码
- telephone ：数据格式要求符合电话格式
- email ： 数据格式要求符合email 格式
- onlyNumber ：只允许输入数字
- noSpecialCaracters ：不允许出现特殊字符
- onlyLetter ： 只能是字母
- date ：必须符合日期格式YYYY-MM-DD
你还可以在点击提交按钮后才触发验证。
- $("#formID").validationEngine({
- inlineValidation: false,
- success : false,
- failure : function() { callFailFunction() }
- })
默认的是在鼠标失去焦点后才开始验证，也就是绑定的是blur事件，那如何改变呢？看下面的配置。
- $("#formID").validationEngine({
- validationEventTriggers:"keyup blur", //will validate on keyup and blur
- success : false,
- failure : function() { callFailFunction() }
- })
validationEventTriggers属性就是修改绑定事件，上面是增加了个keyup，也就是键盘按键起来就触发验证。
修改提示层的位置
- $("#formID").validationEngine({
- promptPosition: "topRight", // OPENNING BOX POSITION, IMPLEMENTED: topLeft, topRight, bottomLeft, centerRight, bottomRight
- success : false,
- failure : function() {
- })
promptPosition就是控制位置，有5种模式：topLeft, topRight, bottomLeft, centerRight, bottomRight
ajax验证模式
- $("#formID").validationEngine({
- ajaxSubmit: true,
- ajaxSubmitFile: "ajaxSubmit.php",
- ajaxSubmitMessage: "Thank you, we received your inscription!",
- ajaxSubmitExtraData: "securityCode=38709238423&name=john",
- success : false,
- failure : function() {}
- })
这几个参数很好理解。
- ajaxSubmit: true, 提交表单使用ajax提交
- ajaxSubmitFile: “ajaxSubmit.php”, 后台脚本
- ajaxSubmitMessage 成功后显示的信息
- ajaxSubmitExtraData 参数
这里需要对后台脚本返回的数据进行下说明：
返回的数据格式是json。
出现一个错误，产生一个数组，如下：
- $arrayError[0][0] = "#email"; // FIELDID
- $arrayError[0][1] = "Your email do not match.. whatever it need to match"; // TEXT ERROR
- $arrayError[0][2] = "error"; // BOX COLOR
二：修改过的地方
解决ie6下select遮挡div的办法
jquery.validationEngine.js要修改的地方：
- calculatedPosition.callerTopPosition += "px";
- calculatedPosition.callerleftPosition += "px";
- calculatedPosition.marginTopSize += "px";
- //add matychen
- if ( $.browser.msie && /6.0/.test(navigator.userAgent) ) {
- $(divFormError).append('<iframe class="iframe" frameborder="0" scr="javascript:false;">iframe>');
- }
- // add matychen
- $(divFormError).css({
- "top": calculatedPosition.callerTopPosition,
- "left": calculatedPosition.callerleftPosition,
- "marginTop": calculatedPosition.marginTopSize,
- "opacity": 0
- });
validationEngine.jquery.css里面加入以下代码：
- .iframe {
- position: absolute;
- width: expression(this.parentNode.offsetWidth+\'px\');
- height: expression(this.parentNode.offsetHeight-32+\'px\');
- z-index: -1;
- top: expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\'px\');
- left: expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+\'px\');
- }
formvalidator.html如下：
- "-//IETF//DTD LEVEL1//EN">
-
formvalidator.html -
-
-
-
-
-
-
-
-
- Desired username (ajax validation, only karnius is available) :
-
- First name (optional)
-
- Last name :
-
-
- Radio Groupe :
- radio 1:
- radio 2:
- radio 3:
- Radio Groupe :
-
- Minimum 2 checkbox :
- Minimum 2 checkbox :
- Date : (format YYYY-MM-DD)
-
- Favorite sport 1:
-
-
-
-
-
- Favorite sport 2:
-
-
-
-
-
- Age :
-
- Telephone :
-
- mobilephone :
-
- chinese :
-
- url :
-
- zipcode :
-
- ip :
-
- qq :
-
- Password :
-
- Confirm password :
-
- Email address :
-
- Confirm email address :
-
- Comments :
-
-
- (function($) {
- $.fn.validationEngineLanguage = function() {};
- $.validationEngineLanguage = {
- newLang: function() {
- $.validationEngineLanguage.allRules = {"required":{ // Add your regex rules here, you can take telephone as an example
- "regex":"none",
- "alertText":"* 非空选项.",
- "alertTextCheckboxMultiple":"* 请选择一个单选框.",
- "alertTextCheckboxe":"* 请选择一个复选框."},
- "length":{
- "regex":"none",
- "alertText":"* 长度必须在 ",
- "alertText2":" 至 ",
- "alertText3": " 之间."},
- "maxCheckbox":{
- "regex":"none",
- "alertText":"* 最多选择 ",//官方文档这里有问题
- "alertText2":" 项."},
- "minCheckbox":{
- "regex":"none",
- "alertText":"* 至少选择 ",
- "alertText2":" 项."},
- "confirm":{
- "regex":"none",
- "alertText":"* 两次输入不一致,请重新输入."},
- "telephone":{
- "regex":"/^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/",
- "alertText":"* 请输入有效的电话号码,如:010-29292929."},
- "mobilephone":{
- "regex":"/(^0?[1][358][0-9]{9}$)/",
- "alertText":"* 请输入有效的手机号码."},
- "email":{
- "regex":"/^[a-zA-Z0-9_\.\-]+\@([a-zA-Z0-9\-]+\.)+[a-zA-Z0-9]{2,4}$/",
- "alertText":"* 请输入有效的邮件地址."},
- "date":{
- "regex":"/^(([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8]))))|((([0-9]{2})(0[48]|[2468][048]|[13579][26])|((0[48]|[2468][048]|[3579][26])00))-02-29)$/",
- "alertText":"* 请输入有效的日期,如:2008-08-08."},
- "ip":{
- "regex":"/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/",
- "alertText":"* 请输入有效的IP."},
- "chinese":{
- "regex":"/^[\u4e00-\u9fa5]+$/",
- "alertText":"* 请输入中文."},
- "url":{
- "regex":"/^[a-zA-z]:\\/\\/[^s]$/",//这些验证请自己加强
- "alertText":"* 请输入有效的网址."},
- "zipcode":{
- "regex":"/^[1-9]\d{5}$/",
- "alertText":"* 请输入有效的邮政编码."},
- "qq":{
- "regex":"/^[1-9]\d{4,9}$/",
- "alertText":"* 请输入有效的QQ号码."},
- "onlyNumber":{
- "regex":"/^[0-9]+$/",
- "alertText":"* 请输入数字."},
- "onlyLetter":{
- "regex":"/^[a-zA-Z]+$/",
- "alertText":"* 请输入英文字母."},
- "noSpecialCaracters":{
- "regex":"/^[0-9a-zA-Z]+$/",
- "alertText":"* 请输入英文字母和数字."},
- "ajaxUser":{
- "file":"validate.action",//ajax验证用户名，会post如下参数：validateError ajaxUser；validateId user；validateValue cccc
- "alertTextOk":"* 帐号可以使用.",
- "alertTextLoad":"* 检查中, 请稍后...",
- "alertText":"* 帐号不能使用."},
- "ajaxName":{
- "file":"validateUser.php",
- "alertText":"* This name is already taken",
- "alertTextOk":"* This name is available",
- "alertTextLoad":"* Loading, please wait"}
- }
- }
- }
- })(jQuery);
- $(document).ready(function() {
- $.validationEngineLanguage.newLang()
- });
部分jquery.validationEngine.js
- /* AJAX VALIDATION HAS ITS OWN UPDATE AND BUILD UNLIKE OTHER RULES */
- if(!ajaxisError){
- $.ajax({
- type: "POST",
- url: postfile,
- async: true,
- data: "validateValue="+fieldValue+"&validateId="+fieldId+"&validateError="+customAjaxRule,//+extraData,//自己把其中的+extraData去掉了，不然后面的ajax验证有问题。
- beforeSend: function(){ // BUILD A LOADING PROMPT IF LOAD TEXT EXIST
- if($.validationEngine.settings.allrules[customAjaxRule].alertTextLoad){
- if(!$("div."+fieldId+"formError")[0]){
- return $.validationEngine.buildPrompt(ajaxCaller,$.validationEngine.settings.allrules[customAjaxRule].alertTextLoad,"load");
- }else{
- $.validationEngine.updatePromptText(ajaxCaller,$.validationEngine.settings.allrules[customAjaxRule].alertTextLoad,"load");
- }
- }
- },
struts.xml文件：
-
- <package name="json" extends="json-default">
-
- method="vali">
-
-
- package>
validateAction
- public String vali() {
- ActionContext ac = ActionContext.getContext();
- HttpServletRequest request = (HttpServletRequest) ac
- .get(ServletActionContext.HTTP_REQUEST);
- String validateId = request.getParameter("validateId");
- logger.info("vali() - String validateId=" + validateId);
- String validateValue = request.getParameter("validateValue");
- String validateError = request.getParameter("validateError");
- logger.info("vali() - String validateError=" + validateError);
- //注意下面的顺序，感觉这是个缺陷之一，不过可以在jquery.validationEngine.js更改，
- jsonValidateReturn.add(validateId);
- jsonValidateReturn.add(validateError);
- if(validateValue.equals("chen"))
- jsonValidateReturn.add("true");
- else
- jsonValidateReturn.add("false");
- return SUCCESS;
- }
jquery.validationEngine.js要更改的地方：
- success: function(data){ // GET SUCCESS DATA RETURN JSON
- data = eval( "("+data+")"); // GET JSON DATA FROM PHP AND PARSE IT
- ajaxisError = data.jsonValidateReturn[2];//这里官方文档写死了，可以根据自己需求更改。
- customAjaxRule = data.jsonValidateReturn[1];//这里官方文档写死了，可以根据自己需求更改。
- ajaxCaller = $("#"+data.jsonValidateReturn[0])[0];
- fieldId = ajaxCaller;
- ajaxErrorLength = $.validationEngine.ajaxValidArray.length;
- existInarray = false;
- if(ajaxisError == "false"){ // DATA FALSE UPDATE PROMPT WITH ERROR;
- _checkInArray(false) // Check if ajax validation alreay used on this field
- if(!existInarray){ // Add ajax error to stop submit
- $.validationEngine.ajaxValidArray[ajaxErrorLength] = new Array(2);
- $.validationEngine.ajaxValidArray[ajaxErrorLength][0] = fieldId;
- $.validationEngine.ajaxValidArray[ajaxErrorLength][1] = false;
- existInarray = false;
- }