jquery各种验证

郭远
2023-12-01

首选需要引入3个js文件jquery.validationEngine.js     validation.js   validationEngine-zh_CN.js


validationEngine-zh_CN.js

<span style="font-size:14px;"><span style="font-size:14px;">(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": "* 您必须钩选此栏",
                    "alertTextDateRange": "* 日期范围不可空白"
                },
                "dateRange": {
                    "regex": "none",
                    "alertText": "* 无效的 ",
                    "alertText2": " 日期范围"
                },
                "dateTimeRange": {
                    "regex": "none",
                    "alertText": "* 无效的 ",
                    "alertText2": " 时间范围"
                },
                "minSize": {
                    "regex": "none",
                    "alertText": "* 最少 ",
                    "alertText2": " 个字符"
                },
                "maxSize": {
                    "regex": "none",
                    "alertText": "* 最多 ",
                    "alertText2": " 个字符"
                },
				"groupRequired": {
                    "regex": "none",
                    "alertText": "* 你必需选填其中一个栏位"
                },
                "min": {
                    "regex": "none",
                    "alertText": "* 最小值為 "
                },
                "max": {
                    "regex": "none",
                    "alertText": "* 最大值为 "
                },
                "past": {
                    "regex": "none",
                    "alertText": "* 日期必需早于 "
                },
                "future": {
                    "regex": "none",
                    "alertText": "* 日期必需晚于 "
                },	
                "maxCheckbox": {
                    "regex": "none",
                    "alertText": "* 最多选取 ",
                    "alertText2": " 个项目"
                },
                "minCheckbox": {
                    "regex": "none",
                    "alertText": "* 请选择 ",
                    "alertText2": " 个项目"
                },
                "equals": {
                    "regex": "none",
                    "alertText": "* 请输入与上面相同的密码"
                },
                "creditCard": {
                    "regex": "/^\d{5}$/g",
                    "alertText": "* 无效的信用卡号码"
                },
                "phone": {
                    // credit: jquery.h5validate.js / orefalo
                    "regex": /^([\+][0-9]{1,3}[ \.\-])?([\(]{1}[0-9]{2,6}[\)])?([0-9 \.\-\/]{3,20})((x|ext|extension)[ ]?[0-9]{1,4})?$/,
                    "alertText": "* 无效的电话号码"
                },
                "email": {
                    // Shamelessly lifted from Scott Gonzalez via the Bassistance Validation plugin http://projects.scottsplayground.com/email_address_validation/
                    "regex": /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,
                    "alertText": "* 邮件地址无效"
                },
                "integer": {
                    "regex": /^[\-\+]?\d+$/,
                    "alertText": "* 不是有效的整数"
                },
                "number": {
                    // Number, including positive, negative, and floating decimal. credit: orefalo
                    "regex": /^[\-\+]?(([0-9]+)([\.,]([0-9]+))?|([\.,]([0-9]+))?)$/,
                    "alertText": "* 无效的数字"
                },
                "date": {
                    "regex": /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/,
                    "alertText": "* 无效的日期,格式必需为 YYYY-MM-DD"
                },
                "ipv4": {
                    "regex": /^((([01]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))[.]){3}(([0-1]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))$/,
                    "alertText": "* 无效的 IP 地址"
                },
                "url": {
                    "regex": /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i,
                    "alertText": "* Invalid URL"
                },
                "onlyNumberSp": {
                    "regex": /^[0-9\ ]+$/,
                    "alertText": "* 只能填数字"
                },
                "onlyLetterSp": {
                    "regex": /^[a-zA-Z\ \']+$/,
                    "alertText": "* 只接受英文字母大小写"
                },
                "onlyLetterNumber": {
                    "regex": /^[0-9a-zA-Z]+$/,
                    "alertText": "* 不接受特殊字符"
                },
                // --- CUSTOM RULES -- Those are specific to the demos, they can be removed or changed to your likings
                "ajaxUserCall": {
                    "url": "ajaxValidateFieldUser",
                    // you may want to pass extra data on the ajax call
                    "extraData": "name=eric",
                    "alertText": "* 此名称已被其他人使用",
                    "alertTextLoad": "* 正在确认名称是否有其他人使用,请稍等。"
                },
				"ajaxUserCallPhp": {
                    "url": "phpajax/ajaxValidateFieldUser.php",
                    // you may want to pass extra data on the ajax call
                    "extraData": "name=eric",
                    // if you provide an "alertTextOk", it will show as a green prompt when the field validates
                    "alertTextOk": "* 此帐号名称可以使用",
                    "alertText": "* 此名称已被其他人使用",
                    "alertTextLoad": "* 正在确认帐号名称是否有其他人使用,请稍等。"
                },
                "ajaxNameCall": {
                    // remote json service location
                    "url": "ajaxValidateFieldName",
                    // error
                    "alertText": "* 此名称可以使用",
                    // if you provide an "alertTextOk", it will show as a green prompt when the field validates
                    "alertTextOk": "* 此名称已被其他人使用",
                    // speaks by itself
                    "alertTextLoad": "* 正在确认名称是否有其他人使用,请稍等。"
                },
				 "ajaxNameCallPhp": {
	                    // remote json service location
	                    "url": "phpajax/ajaxValidateFieldName.php",
	                    // error
	                    "alertText": "* 此名称已被其他人使用",
	                    // speaks by itself
	                    "alertTextLoad": "* 正在确认名称是否有其他人使用,请稍等。"
	                },
                "validate2fields": {
                    "alertText": "* 请输入 HELLO"
                },
	            //tls warning:homegrown not fielded 
                "dateFormat":{
                    "regex": /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$|^(?:(?:(?:0?[13578]|1[02])(\/|-)31)|(?:(?:0?[1,3-9]|1[0-2])(\/|-)(?:29|30)))(\/|-)(?:[1-9]\d\d\d|\d[1-9]\d\d|\d\d[1-9]\d|\d\d\d[1-9])$|^(?:(?:0?[1-9]|1[0-2])(\/|-)(?:0?[1-9]|1\d|2[0-8]))(\/|-)(?:[1-9]\d\d\d|\d[1-9]\d\d|\d\d[1-9]\d|\d\d\d[1-9])$|^(0?2(\/|-)29)(\/|-)(?:(?:0[48]00|[13579][26]00|[2468][048]00)|(?:\d\d)?(?:0[48]|[2468][048]|[13579][26]))$/,
                    "alertText": "* 无效的日期格式"
                },
                //tls warning:homegrown not fielded 
				"dateTimeFormat": {
	                "regex": /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])\s+(1[012]|0?[1-9]){1}:(0?[1-5]|[0-6][0-9]){1}:(0?[0-6]|[0-6][0-9]){1}\s+(am|pm|AM|PM){1}$|^(?:(?:(?:0?[13578]|1[02])(\/|-)31)|(?:(?:0?[1,3-9]|1[0-2])(\/|-)(?:29|30)))(\/|-)(?:[1-9]\d\d\d|\d[1-9]\d\d|\d\d[1-9]\d|\d\d\d[1-9])$|^((1[012]|0?[1-9]){1}\/(0?[1-9]|[12][0-9]|3[01]){1}\/\d{2,4}\s+(1[012]|0?[1-9]){1}:(0?[1-5]|[0-6][0-9]){1}:(0?[0-6]|[0-6][0-9]){1}\s+(am|pm|AM|PM){1})$/,
                    "alertText": "* 无效的日期或时间格式",
                    "alertText2": "可接受的格式: ",
                    "alertText3": "mm/dd/yyyy hh:mm:ss AM|PM 或 ", 
                    "alertText4": "yyyy-mm-dd hh:mm:ss AM|PM"
	            },
	            "QQ": {
                    "regex": /^\d{5,11}$/,
                    "alertText": "* QQ必须是数字且长度应在5-11位之间"
                },
	            //金额输入限制
	            "onlyNum": {		
					"regex": /^(\d+\.\d{1,2}|\d+)$/,
					"alertText": "* 只能输入数字及后2位小数"				
				},
				//地址栏值为0重新选择
	            "selectAddr": {		
					"regex": /^[0-9]*[1-9][0-9]*$/,
					"alertText": "* 请选择地址"				
				},
				//数字必须大于0
	            "gtZero": {		
					"regex": /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/,
					"alertText": "* 必须大于0"				
				},
				//操作员密码为6-32位数字
	            "operatorPSW": {		
					"regex": /^\d{6,32}$/,
					"alertText": "* 密码必须为6-32位数字"				
				},
				//商户编号为16位字符
	            "shopNum": {		
					"regex": /^\w{15}?$/,
					"alertText": "* 商户编号为15位字符"				
				},
				//11位手机号
	            "cellPhone": {		
					"regex": /^([0-9]{11})?$/,
					"alertText": "* 只能输入11位手机号"				
				}, //11位手机号
	            "idCard": {		
					"regex": /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/,
					"alertText": "* 请输入正确的身份证号"				
				},"loginPwd": {
	                "regex": /^(\w){6,32}$/,
	                "alertText": "* 密码长度在6之32位之间"
	            },"post": {
	                "regex": /^[1-9]{1}[0-9]{5}$/,
	                "alertText": "* 请输入正确的邮编"
	            },"card": {
	                "regex": /^\d{16}$|^\d{19}$|^\d{6}[- ]\d{10,13}$|^\d{4}[- ]\d{4}[- ]\d{4}[- ]\d{4,7}$/,
	                "alertText": "* 无效的银行卡号码"
	            },
	            //银行卡号
                "bankCardAccount": {
                	"regex": /^[0-9]{16,19}$/,
                	"alertText": "* 无效的银行卡号"
                }
            };          
        }
    };
    $.validationEngineLanguage.newLang();
})(jQuery);</span></span>


validation.js


<span style="font-size:14px;"><span style="font-size:14px;"><pre name="code" class="html">$(function() {
	$("#formID").validationEngine();
	$("#formId").validationEngine();
});</span>
</span>


<span style="color:#FF0000;">jquery.validationEngine.js</span>

/* * Inline Form Validation Engine 2.5.1, jQuery plugin * * Copyright(c) 2010, Cedric Dugas * http://www.position-absolute.com * * 2.0 Rewrite by Olivier Refalo * http://www.crionics.com * * Form validation engine allowing custom regex rules to be added. * Licensed under the MIT License */ (function($) { "use strict"; var methods = { /** * Kind of the constructor, called before any action * @param {Map} user options */ init: function(options) { var form = this; if (!form.data('jqv') || form.data('jqv') == null ) { options = methods._saveOptions(form, options); // bind all formError elements to close on click $(".formError").live("click", function() { $(this).fadeOut(150, function() { // remove prompt once invisible $(this).parent('.formErrorOuter').remove(); $(this).remove(); }); }); } return this; },/*** Attachs jQuery.validationEngine to form.submit and field.blur events* Takes an optional params: a list of options* ie. jQuery("#formID1").validationEngine('attach', {promptPosition : "centerRight"});*/attach: function(userOptions) {var form = this;var options;if(userOptions)options = methods._saveOptions(form, userOptions);elseoptions = form.data('jqv');options.validateAttribute = (form.find("[data-validation-engine*=validate]").length) ? "data-validation-engine" : "class";if (options.binded) {// bind fieldsform.find("["+options.validateAttribute+"*=validate]").not("[type=checkbox]").not("[type=radio]").not(".datepicker").bind(options.validationEventTrigger, methods._onFieldEvent);form.find("["+options.validateAttribute+"*=validate][type=checkbox],["+options.validateAttribute+"*=validate][type=radio]").bind("click", methods._onFieldEvent);form.find("["+options.validateAttribute+"*=validate][class*=datepicker]").bind(options.validationEventTrigger,{"delay": 300}, methods._onFieldEvent);}if (options.autoPositionUpdate) {$(window).bind("resize", {"noAnimation": true,"formElem": form}, methods.updatePromptsPosition);}// bind form.submitform.bind("submit", methods._onSubmitEvent);return this;},/*** Unregisters any bindings that may point to jQuery.validaitonEngine*/detach: function() {var form = this;var options = form.data('jqv');// unbind fieldsform.find("["+options.validateAttribute+"*=validate]").not("[type=checkbox]").unbind(options.validationEventTrigger, methods._onFieldEvent);form.find("["+options.validateAttribute+"*=validate][type=checkbox],[class*=validate][type=radio]").unbind("click", methods._onFieldEvent);// unbind form.submitform.unbind("submit", methods.onAjaxFormComplete);// unbind live fields (kill)form.find("["+options.validateAttribute+"*=validate]").not("[type=checkbox]").die(options.validationEventTrigger, methods._onFieldEvent);form.find("["+options.validateAttribute+"*=validate][type=checkbox]").die("click", methods._onFieldEvent);// unbind form.submitform.die("submit", methods.onAjaxFormComplete);form.removeData('jqv');if (options.autoPositionUpdate) {$(window).unbind("resize", methods.updatePromptsPosition)}return this;},/*** Validates the form fields, shows prompts accordingly.* Note: There is no ajax form validation with this method, only field ajax validation are evaluated** @return true if the form validates, false if it fails*/ validate: function() { return methods._validateFields(this); }, /** * Validates one field, shows prompt accordingly. * Note: There is no ajax form validation with this method, only field ajax validation are evaluated * * @return true if the form validates, false if it fails */ validateField: function(el) { var options = $(this).data('jqv'); var r = methods._validateField($(el), options); if (options.onSuccess && options.InvalidFields.length == 0) options.onSuccess(); else if (options.onFailure && options.InvalidFields.length > 0) options.onFailure(); return r; }, /** * Validates the form fields, shows prompts accordingly. * Note: this methods performs fields and form ajax validations(if setup) * * @return true if the form validates, false if it fails, undefined if ajax is used for form validation */ validateform: function() { return methods._onSubmitEvent.call(this); },/*** Redraw prompts position, useful when you change the DOM state when validating*/updatePromptsPosition: function(event) {if (event && this == window) {var form = event.data.formElem;var noAnimation = event.data.noAnimation;}elsevar form = $(this.closest('form'));var options = form.data('jqv');// No option, take default oneform.find('['+options.validateAttribute+'*=validate]').not(':hidden').not(":disabled").each(function(){var field = $(this);var prompt = methods._getPrompt(field);var promptText = $(prompt).find(".formErrorContent").html();if(prompt)methods._updatePrompt(field, $(prompt), promptText, undefined, false, options, noAnimation);});return this;},/*** Displays a prompt on a element.* Note that the element needs an id!** @param {String} promptText html text to display type* @param {String} type the type of bubble: 'pass' (green), 'load' (black) anything else (red)* @param {String} possible values topLeft, topRight, bottomLeft, centerRight, bottomRight*/showPrompt: function(promptText, type, promptPosition, showArrow) {var form = this.closest('form');var options = form.data('jqv');// No option, take default oneif(!options) options = methods._saveOptions(this, options);if(promptPosition)options.promptPosition=promptPosition;options.showArrow = showArrow==true;methods._showPrompt(this, promptText, type, false, options);return this;},/*** Closes all error prompts on the page*/hidePrompt: function() {var form = this;var options = form.data('jqv');var promptClass = "."+ methods._getClassName($(this).attr("id")) + "formError";$(promptClass).fadeTo(options.fadeDuration, 0.3, function() {$(this).parent('.formErrorOuter').remove();$(this).remove();});return this;},/*** Closes form error prompts, CAN be invidual*/ hide: function() { var form = this; var options = form.data('jqv'); var closingtag; if($(this).is("form")){ closingtag = "parentForm"+methods._getClassName($(this).attr("id")); }else{ closingtag = methods._getClassName($(this).attr("id")) +"formError"; } $('.'+closingtag).fadeTo(options.fadeDuration, 0.3, function() { $(this).parent('.formErrorOuter').remove(); $(this).remove(); }); return this; }, /** * Closes all error prompts on the page */ hideAll: function() { var form = this; var options = form.data('jqv'); $('.formError').fadeTo(options.fadeDuration, 0.3, function() { $(this).parent('.formErrorOuter').remove(); $(this).remove(); }); return this; },/*** Typically called when user exists a field using tab or a mouse click, triggers a field* validation*/_onFieldEvent: function(event) {var field = $(this);var form = field.closest('form');var options = form.data('jqv');// validate the current fieldwindow.setTimeout(function() {methods._validateField(field, options);if (options.InvalidFields.length == 0 && options.onSuccess) {options.onSuccess();} else if (options.InvalidFields.length > 0 && options.onFailure) {options.onFailure();}}, (event.data) ? event.data.delay : 0);},/*** Called when the form is submited, shows prompts accordingly** @param {jqObject}* form* @return false if form submission needs to be cancelled*/_onSubmitEvent: function() {var form = $(this);var options = form.data('jqv');// validate each field // (- skip field ajax validation, not necessary IF we will perform an ajax form validation)var r=methods._validateFields(form, options.ajaxFormValidation);if (r && options.ajaxFormValidation) {methods._validateFormWithAjax(form, options);return false;}if(options.onValidationComplete) {options.onValidationComplete(form, r);return false;}return r;},/*** Return true if the ajax field validations passed so far* @param {Object} options* @return true, is all ajax validation passed so far (remember ajax is async)*/_checkAjaxStatus: function(options) {var status = true;$.each(options.ajaxValidCache, function(key, value) {if (!value) {status = false;// break the eachreturn false;}});return status;},/*** Validates form fields, shows prompts accordingly** @param {jqObject}* form* @param {skipAjaxFieldValidation}* boolean - when set to true, ajax field validation is skipped, typically used when the submit button is clicked** @return true if form is valid, false if not, undefined if ajax form validation is done*/_validateFields: function(form, skipAjaxValidation) {var options = form.data('jqv');// this variable is set to true if an error is foundvar errorFound = false;// Trigger hook, start validationform.trigger("jqv.form.validating");// first, evaluate status of non ajax fieldsvar first_err=null;form.find('['+options.validateAttribute+'*=validate]').not(':hidden').not(":disabled").each( function() { var field = $(this); var names = []; if ($.inArray(field.attr('name'), names) < 0) { errorFound |= methods._validateField(field, options, skipAjaxValidation); if (options.doNotShowAllErrosOnSubmit) return false; if (errorFound && first_err==null) { first_err=field; } names.push(field.attr('name')); }});// second, check to see if all ajax calls completed ok// errorFound |= !methods._checkAjaxStatus(options);// third, check status and scroll the container accordinglyform.trigger("jqv.form.result", [errorFound]);if (errorFound) {if (options.scroll) {var destination=first_err.offset().top;var fixleft = first_err.offset().left;//prompt positioning adjustment support. Usage: positionType:Xshift,Yshift (for ex.: bottomLeft:+20 or bottomLeft:-20,+10)var positionType=options.promptPosition;if (typeof(positionType)=='string' && positionType.indexOf(":")!=-1)positionType=positionType.substring(0,positionType.indexOf(":"));if (positionType!="bottomRight" && positionType!="bottomLeft") {var prompt_err= methods._getPrompt(first_err);destination=prompt_err.offset().top;}// get the position of the first error, there should be at least one, no need to check this//var destination = form.find(".formError:not('.greenPopup'):first").offset().top;if (options.isOverflown) {var overflowDIV = $(options.overflownDIV);if(!overflowDIV.length) return false;var scrollContainerScroll = overflowDIV.scrollTop();var scrollContainerPos = -parseInt(overflowDIV.offset().top);destination += scrollContainerScroll + scrollContainerPos - 5;var scrollContainer = $(options.overflownDIV + ":not(:animated)");scrollContainer.animate({ scrollTop: destination }, 1100, function(){if(options.focusFirstField) first_err.focus();});} else {$("html:not(:animated),body:not(:animated)").animate({scrollTop: destination,scrollLeft: fixleft}, 1100, function(){if(options.focusFirstField) first_err.focus();});}} else if(options.focusFirstField)first_err.focus();return false;}return true;},/*** This method is called to perform an ajax form validation.* During this process all the (field, value) pairs are sent to the server which returns a list of invalid fields or true** @param {jqObject} form* @param {Map} options*/_validateFormWithAjax: function(form, options) {var data = form.serialize();var url = (options.ajaxFormValidationURL) ? options.ajaxFormValidationURL : form.attr("action");$.ajax({type: "GET",url: url,cache: false,dataType: "json",data: data,form: form,methods: methods,options: options,beforeSend: function() {return options.onBeforeAjaxFormValidation(form, options);},error: function(data, transport) {methods._ajaxError(data, transport);},success: function(json) {if (json !== true) {// getting to this case doesn't necessary means that the form is invalid// the server may return green or closing prompt actions// this flag helps figuring it outvar errorInForm=false;for (var i = 0; i < json.length; i++) {var value = json[i];var errorFieldId = value[0];var errorField = $($("#" + errorFieldId)[0]);// make sure we found the elementif (errorField.length == 1) {// promptText or selectorvar msg = value[2];// if the field is validif (value[1] == true) {if (msg == "" || !msg){// if for some reason, status==true and error="", just close the promptmethods._closePrompt(errorField);} else {// the field is valid, but we are displaying a green promptif (options.allrules[msg]) {var txt = options.allrules[msg].alertTextOk;if (txt)msg = txt;}methods._showPrompt(errorField, msg, "pass", false, options, true);}} else {// the field is invalid, show the red error prompterrorInForm|=true;if (options.allrules[msg]) {var txt = options.allrules[msg].alertText;if (txt)msg = txt;}methods._showPrompt(errorField, msg, "", false, options, true);}}}options.onAjaxFormComplete(!errorInForm, form, json, options);} elseoptions.onAjaxFormComplete(true, form, "", options);}});},/*** Validates field, shows prompts accordingly** @param {jqObject}* field* @param {Array[String]}* field's validation rules* @param {Map}* user options* @return true if field is valid*/_validateField: function(field, options, skipAjaxValidation) {if (!field.attr("id"))$.error("jQueryValidate: an ID attribute is required for this field: " + field.attr("name") + " class:" +field.attr("class"));var rulesParsing = field.attr(options.validateAttribute);var getRules = /validate\[(.*)\]/.exec(rulesParsing);if (!getRules)return false;var str = getRules[1];var rules = str.split(/\[|,|\]/);// true if we ran the ajax validation, tells the logic to stop messing with promptsvar isAjaxValidator = false;var fieldName = field.attr("name");var promptText = "";var required = false;options.isError = false;options.showArrow = true;var form = $(field.closest("form"));for (var i = 0; i < rules.length; i++) {// Fix for adding spaces in the rulesrules[i] = rules[i].replace(" ", "")var errorMsg = undefined;switch (rules[i]) {case "required":required = true;errorMsg = methods._required(field, rules, i, options);break;case "custom":errorMsg = methods._customRegex(field, rules, i, options);break;case "groupRequired":// Check is its the first of group, if not, reload validation with first field// AND continue normal validation on present fieldvar classGroup = "["+options.validateAttribute+"*=" +rules[i + 1] +"]";var firstOfGroup = form.find(classGroup).eq(0);if(firstOfGroup[0] != field[0]){methods._validateField(firstOfGroup, options, skipAjaxValidation)options.showArrow = true;continue;};errorMsg = methods._groupRequired(field, rules, i, options);if(errorMsg) required = true;options.showArrow = false;break;case "ajax":// ajax has its own prompts handling techniqueif(!skipAjaxValidation){methods._ajax(field, rules, i, options);isAjaxValidator = true;}break;case "minSize":errorMsg = methods._minSize(field, rules, i, options);break;case "maxSize":errorMsg = methods._maxSize(field, rules, i, options);break;case "min":errorMsg = methods._min(field, rules, i, options);break;case "max":errorMsg = methods._max(field, rules, i, options);break;case "past":errorMsg = methods._past(field, rules, i, options);break;case "future":errorMsg = methods._future(field, rules, i, options);break;case "dateRange":var classGroup = "["+options.validateAttribute+"*=" + rules[i + 1] + "]";var firstOfGroup = form.find(classGroup).eq(0);var secondOfGroup = form.find(classGroup).eq(1);//if one entry out of the pair has value then proceed to run through validationif (firstOfGroup[0].value || secondOfGroup[0].value) {errorMsg = methods._dateRange(firstOfGroup, secondOfGroup, rules, i, options);}if (errorMsg) required = true;options.showArrow = false;break;case "dateTimeRange":var classGroup = "["+options.validateAttribute+"*=" + rules[i + 1] + "]";var firstOfGroup = form.find(classGroup).eq(0);var secondOfGroup = form.find(classGroup).eq(1);//if one entry out of the pair has value then proceed to run through validationif (firstOfGroup[0].value || secondOfGroup[0].value) {errorMsg = methods._dateTimeRange(firstOfGroup, secondOfGroup, rules, i, options);}if (errorMsg) required = true;options.showArrow = false;break;case "maxCheckbox":errorMsg = methods._maxCheckbox(form, field, rules, i, options);field = $(form.find("input[name='" + fieldName + "']"));break;case "minCheckbox":errorMsg = methods._minCheckbox(form, field, rules, i, options);field = $(form.find("input[name='" + fieldName + "']"));break;case "equals":errorMsg = methods._equals(field, rules, i, options);break;case "funcCall":errorMsg = methods._funcCall(field, rules, i, options);break;case "creditCard":errorMsg = methods._creditCard(field, rules, i, options);break;default://$.error("jQueryValidator rule not found"+rules[i]);}if (errorMsg !== undefined) {promptText += errorMsg + "<br/>";options.isError = true;}}// If the rules required is not added, an empty field is not validatedif(!required && field.val() == "") options.isError = false;// Hack for radio/checkbox group button, the validation go into the// first radio/checkbox of the groupvar fieldType = field.prop("type");if ((fieldType == "radio" || fieldType == "checkbox") && form.find("input[name='" + fieldName + "']").size() > 1) {field = $(form.find("input[name='" + fieldName + "'][type!=hidden]:first"));options.showArrow = false;}if (fieldType == "text" && form.find("input[name='" + fieldName + "']").size() > 1) {field = $(form.find("input[name='" + fieldName + "'][type!=hidden]:first"));options.showArrow = false;}if (options.isError){methods._showPrompt(field, promptText, "", false, options);}else{if (!isAjaxValidator) methods._closePrompt(field);}if (!isAjaxValidator) {field.trigger("jqv.field.result", [field, options.isError, promptText]);}/* Record error */var errindex = $.inArray(field[0], options.InvalidFields);if (errindex == -1) {if (options.isError)options.InvalidFields.push(field[0]);} else if (!options.isError) {options.InvalidFields.splice(errindex, 1);}return options.isError;},/*** Required validation** @param {jqObject} field* @param {Array[String]} rules* @param {int} i rules index* @param {Map}* user options* @return an error string if validation failed*/_required: function(field, rules, i, options) {switch (field.prop("type")) {case "text":case "password":case "textarea":case "file":default:if (!($.trim(field.val())))return options.allrules[rules[i]].alertText;break;case "radio":case "checkbox":var form = field.closest("form");var name = field.attr("name");if (form.find("input[name='" + name + "']:checked").size() == 0) {if (form.find("input[name='" + name + "']").size() == 1)return options.allrules[rules[i]].alertTextCheckboxe;elsereturn options.allrules[rules[i]].alertTextCheckboxMultiple;}break;// required for <select>case "select-one":// added by paul@kinetek.net for select boxes, Thank youif (!field.val())return options.allrules[rules[i]].alertText;break;case "select-multiple":// added by paul@kinetek.net for select boxes, Thank youif (!field.find("option:selected").val())return options.allrules[rules[i]].alertText;}},/*** Validate that 1 from the group field is required** @param {jqObject} field* @param {Array[String]} rules* @param {int} i rules index* @param {Map}* user options* @return an error string if validation failed*/_groupRequired: function(field, rules, i, options) {var classGroup = "["+options.validateAttribute+"*=" +rules[i + 1] +"]";var isValid = false;// Check all fields from the groupfield.closest("form").find(classGroup).each(function(){if(!methods._required($(this), rules, i, options)){isValid = true;return false;}})if(!isValid) return options.allrules[rules[i]].alertText;},/*** Validate Regex rules** @param {jqObject} field* @param {Array[String]} rules* @param {int} i rules index* @param {Map}* user options* @return an error string if validation failed*/_customRegex: function(field, rules, i, options) {var customRule = rules[i + 1];var rule = options.allrules[customRule];if(!rule) {alert("jqv:custom rule not found "+customRule);return;}var ex=rule.regex;if(!ex) {alert("jqv:custom regex not found "+customRule);return;}var pattern = new RegExp(ex);if (!pattern.test(field.val()))return options.allrules[customRule].alertText;},/*** Validate custom function outside of the engine scope** @param {jqObject} field* @param {Array[String]} rules* @param {int} i rules index* @param {Map}* user options* @return an error string if validation failed*/_funcCall: function(field, rules, i, options) {var functionName = rules[i + 1];var fn;if(functionName.indexOf('.')>-1){var namespaces = functionName.split('.');var scope = window;while(namespaces.length){scope = scope[namespaces.shift()];}fn = scope;}elsefn = window[functionName] || options.customFunctions[functionName];if (typeof(fn) == 'function')return fn(field, rules, i, options);},/*** Field match** @param {jqObject} field* @param {Array[String]} rules* @param {int} i rules index* @param {Map}* user options* @return an error string if validation failed*/_equals: function(field, rules, i, options) {var equalsField = rules[i + 1];if (field.val() != $("#" + equalsField).val())return options.allrules.equals.alertText;},/*** Check the maximum size (in characters)** @param {jqObject} field* @param {Array[String]} rules* @param {int} i rules index* @param {Map}* user options* @return an error string if validation failed*/_maxSize: function(field, rules, i, options) {var max = rules[i + 1];var len = field.val().length;if (len > max) {var rule = options.allrules.maxSize;return rule.alertText + max + rule.alertText2;}},/*** Check the minimum size (in characters)** @param {jqObject} field* @param {Array[String]} rules* @param {int} i rules index* @param {Map}* user options* @return an error string if validation failed*/_minSize: function(field, rules, i, options) {var min = rules[i + 1];var len = field.val().length;if (len < min) {var rule = options.allrules.minSize;return rule.alertText + min + rule.alertText2;}},/*** Check number minimum value** @param {jqObject} field* @param {Array[String]} rules* @param {int} i rules index* @param {Map}* user options* @return an error string if validation failed*/_min: function(field, rules, i, options) {var min = parseFloat(rules[i + 1]);var len = parseFloat(field.val());if (len < min) {var rule = options.allrules.min;if (rule.alertText2) return rule.alertText + min + rule.alertText2;return rule.alertText + min;}},/*** Check number maximum value** @param {jqObject} field* @param {Array[String]} rules* @param {int} i rules index* @param {Map}* user options* @return an error string if validation failed*/_max: function(field, rules, i, options) {var max = parseFloat(rules[i + 1]);var len = parseFloat(field.val());if (len >max ) {var rule = options.allrules.max;if (rule.alertText2) return rule.alertText + max + rule.alertText2;//orefalo: to review, also do the translationsreturn rule.alertText + max;}},/*** Checks date is in the past** @param {jqObject} field* @param {Array[String]} rules* @param {int} i rules index* @param {Map}* user options* @return an error string if validation failed*/_past: function(field, rules, i, options) {var p=rules[i + 1];var pdate = (p.toLowerCase() == "now")? new Date():methods._parseDate(p);var vdate = methods._parseDate(field.val());if (vdate > pdate ) {var rule = options.allrules.past;if (rule.alertText2) return rule.alertText + methods._dateToString(pdate) + rule.alertText2;return rule.alertText + methods._dateToString(pdate);}},/*** Checks date is in the future** @param {jqObject} field* @param {Array[String]} rules* @param {int} i rules index* @param {Map}* user options* @return an error string if validation failed*/_future: function(field, rules, i, options) {var p=rules[i + 1];var pdate = (p.toLowerCase() == "now")? new Date():methods._parseDate(p);var vdate = methods._parseDate(field.val());if (vdate < pdate ) {var rule = options.allrules.future;if (rule.alertText2)return rule.alertText + methods._dateToString(pdate) + rule.alertText2;return rule.alertText + methods._dateToString(pdate);}},/*** Checks if valid date** @param {string} date string* @return a bool based on determination of valid date*/_isDate: function (value) {var dateRegEx = new RegExp(/^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$|^(?:(?:(?:0?[13578]|1[02])(\/|-)31)|(?:(?:0?[1,3-9]|1[0-2])(\/|-)(?:29|30)))(\/|-)(?:[1-9]\d\d\d|\d[1-9]\d\d|\d\d[1-9]\d|\d\d\d[1-9])$|^(?:(?:0?[1-9]|1[0-2])(\/|-)(?:0?[1-9]|1\d|2[0-8]))(\/|-)(?:[1-9]\d\d\d|\d[1-9]\d\d|\d\d[1-9]\d|\d\d\d[1-9])$|^(0?2(\/|-)29)(\/|-)(?:(?:0[48]00|[13579][26]00|[2468][048]00)|(?:\d\d)?(?:0[48]|[2468][048]|[13579][26]))$/);return dateRegEx.test(value);},/*** Checks if valid date time** @param {string} date string* @return a bool based on determination of valid date time*/_isDateTime: function (value){var dateTimeRegEx = new RegExp(/^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])\s+(1[012]|0?[1-9]){1}:(0?[1-5]|[0-6][0-9]){1}:(0?[0-6]|[0-6][0-9]){1}\s+(am|pm|AM|PM){1}$|^(?:(?:(?:0?[13578]|1[02])(\/|-)31)|(?:(?:0?[1,3-9]|1[0-2])(\/|-)(?:29|30)))(\/|-)(?:[1-9]\d\d\d|\d[1-9]\d\d|\d\d[1-9]\d|\d\d\d[1-9])$|^((1[012]|0?[1-9]){1}\/(0?[1-9]|[12][0-9]|3[01]){1}\/\d{2,4}\s+(1[012]|0?[1-9]){1}:(0?[1-5]|[0-6][0-9]){1}:(0?[0-6]|[0-6][0-9]){1}\s+(am|pm|AM|PM){1})$/);return dateTimeRegEx.test(value);},//Checks if the start date is before the end date//returns true if end is later than start_dateCompare: function (start, end) {return (new Date(start.toString()) < new Date(end.toString()));},/*** Checks date range** @param {jqObject} first field name* @param {jqObject} second field name* @return an error string if validation failed*/_dateRange: function (first, second, rules, i, options) {//are not both populatedif ((!first[0].value && second[0].value) || (first[0].value && !second[0].value)) {return options.allrules[rules[i]].alertText + options.allrules[rules[i]].alertText2;}//are not both datesif (!methods._isDate(first[0].value) || !methods._isDate(second[0].value)) {return options.allrules[rules[i]].alertText + options.allrules[rules[i]].alertText2;}//are both dates but range is offif (!methods._dateCompare(first[0].value, second[0].value)) {return options.allrules[rules[i]].alertText + options.allrules[rules[i]].alertText2;}},/*** Checks date time range** @param {jqObject} first field name* @param {jqObject} second field name* @return an error string if validation failed*/_dateTimeRange: function (first, second, rules, i, options) {//are not both populatedif ((!first[0].value && second[0].value) || (first[0].value && !second[0].value)) {return options.allrules[rules[i]].alertText + options.allrules[rules[i]].alertText2;}//are not both datesif (!methods._isDateTime(first[0].value) || !methods._isDateTime(second[0].value)) {return options.allrules[rules[i]].alertText + options.allrules[rules[i]].alertText2;}//are both dates but range is offif (!methods._dateCompare(first[0].value, second[0].value)) {return options.allrules[rules[i]].alertText + options.allrules[rules[i]].alertText2;}},/*** Max number of checkbox selected** @param {jqObject} field* @param {Array[String]} rules* @param {int} i rules index* @param {Map}* user options* @return an error string if validation failed*/_maxCheckbox: function(form, field, rules, i, options) {var nbCheck = rules[i + 1];var groupname = field.attr("name");var groupSize = form.find("input[name='" + groupname + "']:checked").size();if (groupSize > nbCheck) {options.showArrow = false;if (options.allrules.maxCheckbox.alertText2) return options.allrules.maxCheckbox.alertText + " " + nbCheck + " " + options.allrules.maxCheckbox.alertText2;return options.allrules.maxCheckbox.alertText;}},/*** Min number of checkbox selected** @param {jqObject} field* @param {Array[String]} rules* @param {int} i rules index* @param {Map}* user options* @return an error string if validation failed*/_minCheckbox: function(form, field, rules, i, options) {var nbCheck = rules[i + 1];var groupname = field.attr("name");var groupSize = form.find("input[name='" + groupname + "']:checked").size();if (groupSize < nbCheck) {options.showArrow = false;return options.allrules.minCheckbox.alertText + " " + nbCheck + " " + options.allrules.minCheckbox.alertText2;}},/*** Checks that it is a valid credit card number according to the* Luhn checksum algorithm.** @param {jqObject} field* @param {Array[String]} rules* @param {int} i rules index* @param {Map}* user options* @return an error string if validation failed*/_creditCard: function(field, rules, i, options) {//spaces and dashes may be valid characters, but must be stripped to calculate the checksum.var valid = false, cardNumber = field.val().replace(/ +/g, '').replace(/-+/g, '');var numDigits = cardNumber.length;if (numDigits >= 14 && numDigits <= 16 && parseInt(cardNumber) > 0) {var sum = 0, i = numDigits - 1, pos = 1, digit, luhn = new String();do {digit = parseInt(cardNumber.charAt(i));luhn += (pos++ % 2 == 0) ? digit * 2 : digit;} while (--i >= 0)for (i = 0; i < luhn.length; i++) {sum += parseInt(luhn.charAt(i));}valid = sum % 10 == 0;}if (!valid) return options.allrules.creditCard.alertText;},/*** Ajax field validation** @param {jqObject} field* @param {Array[String]} rules* @param {int} i rules index* @param {Map}* user options* @return nothing! the ajax validator handles the prompts itself*/ _ajax: function(field, rules, i, options) { var errorSelector = rules[i + 1]; var rule = options.allrules[errorSelector]; var extraData = rule.extraData; var extraDataDynamic = rule.extraDataDynamic; if (!extraData) extraData = ""; if (extraDataDynamic) { var tmpData = []; var domIds = String(extraDataDynamic).split(","); for (var i = 0; i < domIds.length; i++) { var id = domIds[i]; if ($(id).length) { var inputValue = field.closest("form").find(id).val(); var keyValue = id.replace('#', '') + '=' + escape(inputValue); tmpData.push(keyValue); } } extraDataDynamic = tmpData.join("&"); } else { extraDataDynamic = ""; } if (!options.isError) { $.ajax({ type: "GET", url: rule.url, cache: false, dataType: "json", data: "fieldId=" + field.attr("id") + "&fieldValue=" + field.val() + "&extraData=" + extraData + "&" + extraDataDynamic, field: field, rule: rule, methods: methods, options: options, beforeSend: function() { // build the loading prompt var loadingText = rule.alertTextLoad; if (loadingText) methods._showPrompt(field, loadingText, "load", true, options); }, error: function(data, transport) { methods._ajaxError(data, transport); }, success: function(json) { // asynchronously called on success, data is the json answer from the server var errorFieldId = json[0]; //var errorField = $($("#" + errorFieldId)[0]); var errorField = $($("input[id='" + errorFieldId +"']")[0]); // make sure we found the element if (errorField.length == 1) { var status = json[1]; // read the optional msg from the server var msg = json[2]; if (!status) { // Houston we got a problem - display an red prompt options.ajaxValidCache[errorFieldId] = false; options.isError = true; // resolve the msg prompt if(msg) { if (options.allrules[msg]) { var txt = options.allrules[msg].alertText; if (txt) msg = txt; } } else msg = rule.alertText; methods._showPrompt(errorField, msg, "", true, options); } else { if (options.ajaxValidCache[errorFieldId] !== undefined) options.ajaxValidCache[errorFieldId] = true; // resolves the msg prompt if(msg) { if (options.allrules[msg]) { var txt = options.allrules[msg].alertTextOk; if (txt) msg = txt; } } else msg = rule.alertTextOk; // see if we should display a green prompt if (msg) methods._showPrompt(errorField, msg, "pass", true, options); else methods._closePrompt(errorField); } } errorField.trigger("jqv.field.result", [errorField, options.isError, msg]); } }); } },/*** Common method to handle ajax errors** @param {Object} data* @param {Object} transport*/_ajaxError: function(data, transport) {if(data.status == 0 && transport == null)alert("The page is not served from a server! ajax call failed");else if(typeof console != "undefined")console.log("Ajax error: " + data.status + " " + transport);},/*** date -> string** @param {Object} date*/_dateToString: function(date) {return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();},/*** Parses an ISO date* @param {String} d*/_parseDate: function(d) {var dateParts = d.split("-");if(dateParts==d)dateParts = d.split("/");return new Date(dateParts[0], (dateParts[1] - 1) ,dateParts[2]);},/*** Builds or updates a prompt with the given information** @param {jqObject} field* @param {String} promptText html text to display type* @param {String} type the type of bubble: 'pass' (green), 'load' (black) anything else (red)* @param {boolean} ajaxed - use to mark fields than being validated with ajax* @param {Map} options user options*/ _showPrompt: function(field, promptText, type, ajaxed, options, ajaxform) { var prompt = methods._getPrompt(field); // The ajax submit errors are not see has an error in the form, // When the form errors are returned, the engine see 2 bubbles, but those are ebing closed by the engine at the same time // Because no error was found befor submitting if(ajaxform) prompt = false; if (prompt) methods._updatePrompt(field, prompt, promptText, type, ajaxed, options); else methods._buildPrompt(field, promptText, type, ajaxed, options); },/*** Builds and shades a prompt for the given field.** @param {jqObject} field* @param {String} promptText html text to display type* @param {String} type the type of bubble: 'pass' (green), 'load' (black) anything else (red)* @param {boolean} ajaxed - use to mark fields than being validated with ajax* @param {Map} options user options*/_buildPrompt: function(field, promptText, type, ajaxed, options) {// create the promptvar prompt = $('<div>');prompt.addClass(methods._getClassName(field.attr("id")) + "formError");// add a class name to identify the parent form of the promptif(field.is(":input"))prompt.addClass("parentForm"+methods._getClassName(field.parents('form').attr("id")));prompt.addClass("formError");switch (type) {case "pass":prompt.addClass("greenPopup");break;case "load":prompt.addClass("blackPopup");break;default:/* it has error *///alert("unknown popup type:"+type);}if (ajaxed)prompt.addClass("ajaxed");// create the prompt contentvar promptContent = $('<div>').addClass("formErrorContent").html(promptText).appendTo(prompt);// create the css arrow pointing at the field// note that there is no triangle on max-checkbox and radioif (options.showArrow) {var arrow = $('<div>').addClass("formErrorArrow");//prompt positioning adjustment support. Usage: positionType:Xshift,Yshift (for ex.: bottomLeft:+20 or bottomLeft:-20,+10)var positionType=field.data("promptPosition") || options.promptPosition;if (typeof(positionType)=='string') {var pos=positionType.indexOf(":"); if(pos!=-1)positionType=positionType.substring(0,pos);}switch (positionType) {case "bottomLeft":case "bottomRight":prompt.find(".formErrorContent").before(arrow);arrow.addClass("formErrorArrowBottom").html('<div class="line1"><!-- --></div><div class="line2"><!-- --></div><div class="line3"><!-- --></div><div class="line4"><!-- --></div><div class="line5"><!-- --></div><div class="line6"><!-- --></div><div class="line7"><!-- --></div><div class="line8"><!-- --></div><div class="line9"><!-- --></div><div class="line10"><!-- --></div>');break;case "topLeft":case "topRight":arrow.html('<div class="line10"><!-- --></div><div class="line9"><!-- --></div><div class="line8"><!-- --></div><div class="line7"><!-- --></div><div class="line6"><!-- --></div><div class="line5"><!-- --></div><div class="line4"><!-- --></div><div class="line3"><!-- --></div><div class="line2"><!-- --></div><div class="line1"><!-- --></div>');prompt.append(arrow);break;}}// Modify z-indexes for jquery uiif (field.closest('.ui-dialog').length)prompt.addClass('formErrorInsideDialog');prompt.css({"opacity": 0});if (options.relative) {// empty relative span does not disturb page layout// prompt positioned absolute to relative span// vertical-align:top so position calculations are the same as isOverflownvar outer = $('<div>').css({'position' :'relative','display' :'inline','overflow' :'auto'}).addClass('formErrorOuter').append(prompt.css('position','absolute'));field.before(outer);if(options.relativePadding) {outer.css('padding-bottom', prompt.height() + 'px');}} else if (options.isOverflown) {//Cedric: Needed if a container is in position:relative// insert prompt in the form or in the overflown container?field.before(prompt);} else {$("body").append(prompt);}var pos = methods._calculatePosition(field, prompt, options);prompt.css({"top": pos.callerTopPosition,"left": pos.callerleftPosition,"marginTop": pos.marginTopSize,"opacity": 0}).data("callerField", field);if (options.autoHidePrompt) {setTimeout(function(){prompt.animate({"opacity": 0},function(){prompt.closest('.formErrorOuter').remove();prompt.remove();});}, options.autoHideDelay);} return prompt.animate({"opacity": 0.87});},/*** Updates the prompt text field - the field for which the prompt* @param {jqObject} field* @param {String} promptText html text to display type* @param {String} type the type of bubble: 'pass' (green), 'load' (black) anything else (red)* @param {boolean} ajaxed - use to mark fields than being validated with ajax* @param {Map} options user options*/_updatePrompt: function(field, prompt, promptText, type, ajaxed, options, noAnimation) {if (prompt) {if (typeof type !== "undefined") {if (type == "pass")prompt.addClass("greenPopup");elseprompt.removeClass("greenPopup");if (type == "load")prompt.addClass("blackPopup");elseprompt.removeClass("blackPopup");}if (ajaxed)prompt.addClass("ajaxed");elseprompt.removeClass("ajaxed");prompt.find(".formErrorContent").html(promptText);var pos = methods._calculatePosition(field, prompt, options);var css = {"top": pos.callerTopPosition,"left": pos.callerleftPosition,"marginTop": pos.marginTopSize};if (noAnimation)prompt.css(css);elseprompt.animate(css);}},/*** Closes the prompt associated with the given field** @param {jqObject}* field*/ _closePrompt: function(field) { var prompt = methods._getPrompt(field); if (prompt) prompt.fadeTo("fast", 0, function() { prompt.parent('.formErrorOuter').remove(); prompt.remove(); }); }, closePrompt: function(field) { return methods._closePrompt(field); },/*** Returns the error prompt matching the field if any** @param {jqObject}* field* @return undefined or the error prompt (jqObject)*/_getPrompt: function(field) { var formId = $(field).closest('form').attr('id');var className = methods._getClassName(field.attr("id")) + "formError"; var match = $("." + methods._escapeExpression(className) + '.parentForm' + formId)[0];if (match)return $(match);},/** * Returns the escapade classname * * @param {selector} * className */ _escapeExpression: function (selector) { return selector.replace(/([#;&,\.\+\*\~':"\!\^$\[\]\(\)=>\|])/g, "\\$1"); },/** * returns true if we are in a RTLed document * * @param {jqObject} field */isRTL: function(field){var $document = $(document);var $body = $('body');var rtl =(field && field.hasClass('rtl')) ||(field && (field.attr('dir') || '').toLowerCase()==='rtl') ||$document.hasClass('rtl') ||($document.attr('dir') || '').toLowerCase()==='rtl' ||$body.hasClass('rtl') ||($body.attr('dir') || '').toLowerCase()==='rtl';return Boolean(rtl);},/*** Calculates prompt position** @param {jqObject}* field* @param {jqObject}* the prompt* @param {Map}* options* @return positions*/_calculatePosition: function (field, promptElmt, options) {var promptTopPosition, promptleftPosition, marginTopSize;var fieldWidth = field.width();var promptHeight = promptElmt.height();var overflow = options.isOverflown || options.relative;if (overflow) {// is the form contained in an overflown container?promptTopPosition = promptleftPosition = 0;// compensation for the arrowmarginTopSize = -promptHeight;} else {var offset = field.offset();promptTopPosition = offset.top;promptleftPosition = offset.left;marginTopSize = 0;}//prompt positioning adjustment support//now you can adjust prompt position//usage: positionType:Xshift,Yshift//for example:// bottomLeft:+20 means bottomLeft position shifted by 20 pixels right horizontally// topRight:20, -15 means topRight position shifted by 20 pixels to right and 15 pixels to top//You can use +pixels, - pixels. If no sign is provided than + is default.var positionType=field.data("promptPosition") || options.promptPosition;var shift1="";var shift2="";var shiftX=0;var shiftY=0;if (typeof(positionType)=='string') {//do we have any position adjustments ?if (positionType.indexOf(":")!=-1) {shift1=positionType.substring(positionType.indexOf(":")+1);positionType=positionType.substring(0,positionType.indexOf(":"));//if any advanced positioning will be needed (percents or something else) - parser should be added here//for now we use simple parseInt()//do we have second parameter?if (shift1.indexOf(",")!=-1) {shift2=shift1.substring(shift1.indexOf(",")+1);shift1=shift1.substring(0,shift1.indexOf(","));shiftY=parseInt(shift2);if (isNaN(shiftY)) shiftY=0;};shiftX=parseInt(shift1);if (isNaN(shift1)) shift1=0;};};if(!methods.isRTL(field)){switch (positionType) {default:case "topRight":if (overflow)promptleftPosition += fieldWidth - 30;else {promptleftPosition += fieldWidth - 30;promptTopPosition += -promptHeight -2;}break;case "topLeft":if (!overflow) {promptTopPosition += -promptHeight - 10;}break;case "centerRight":if (overflow) {promptTopPosition = 0;marginTopSize = 0;promptleftPosition=field.outerWidth(1)+5;} else {promptleftPosition+=field.outerWidth()+5;}break;case "centerLeft":promptleftPosition -= promptElmt.width() + 2;if (overflow) {promptTopPosition = 0;marginTopSize = 0;}break;case "bottomLeft":promptTopPosition = promptTopPosition + field.height() + 5;if (overflow) {marginTopSize = 0;}break;case "bottomRight":promptleftPosition += fieldWidth - 30;promptTopPosition += field.height() + 5;if (overflow) {marginTopSize = 0;}}}else{switch (positionType) {default:case "topLeft":if (overflow)promptleftPosition = -(promptElmt.width() + fieldWidth - 30);else {promptleftPosition -= promptElmt.width() - 30;promptTopPosition += -promptHeight -2;}break;case "topRight":if (overflow)promptleftPosition = -promptElmt.width();else {promptleftPosition += fieldWidth - promptElmt.width();promptTopPosition += -promptHeight -2;}break;case "centerRight":if (overflow) {promptTopPosition = 0;marginTopSize = 0;promptleftPosition = 5;} else {promptleftPosition+=field.outerWidth()+5;}break;case "centerLeft":if (overflow) {promptleftPosition = -(promptElmt.width() + field.outerWidth() + 2);promptTopPosition = 0;marginTopSize = 0;} else {promptleftPosition -= promptElmt.width() + 2;}break;case "bottomLeft":if (overflow) {promptTopPosition = field.height() + 5;promptleftPosition = -(promptElmt.width() + fieldWidth - 30);marginTopSize = 0;} else {promptleftPosition += -promptElmt.width() + 30;promptTopPosition = promptTopPosition + field.height() + 15;}break;case "bottomRight":if (overflow) {promptTopPosition = field.height() + 5;promptleftPosition = -promptElmt.width();marginTopSize = 0;} else {promptleftPosition += fieldWidth - promptElmt.width();promptTopPosition += field.height() + 15;}}}//apply adjusments if anypromptleftPosition += shiftX;promptTopPosition += shiftY;return {"callerTopPosition": promptTopPosition + "px","callerleftPosition": promptleftPosition + "px","marginTopSize": marginTopSize + "px"};},/*** Saves the user options and variables in the form.data** @param {jqObject}* form - the form where the user option should be saved* @param {Map}* options - the user options* @return the user options (extended from the defaults)*/ _saveOptions: function(form, options) { // is there a language localisation ? if ($.validationEngineLanguage) var allRules = $.validationEngineLanguage.allRules; else $.error("jQuery.validationEngine rules are not loaded, plz add localization files to the page"); // --- Internals DO NOT TOUCH or OVERLOAD --- // validation rules and i18 $.validationEngine.defaults.allrules = allRules; var userOptions = $.extend(true,{},$.validationEngine.defaults,options); // Needed to be retro compatible if (userOptions.isOverflown) userOptions.relative = true; if (userOptions.relative) userOptions.isOverflown = true; form.data('jqv', userOptions); return userOptions; }, /** * Removes forbidden characters from class name * @param {String} className */ _getClassName: function(className) { if(className) return className.replace(/:/g, "_").replace(/\./g, "_"); } }; /** * Plugin entry point. * You may pass an action as a parameter or a list of options. * if none, the init and attach methods are being called. * Remember: if you pass options, the attached method is NOT called automatically * * @param {String} * method (optional) action */ $.fn.validationEngine = function(method) { var form = $(this); if(!form[0]) return false; // stop here if the form does not exist if (typeof(method) == 'string' && method.charAt(0) != '_' && methods[method]) { // make sure init is called once if(method != "showPrompt" && method != "hidePrompt" && method != "hide" && method != "hideAll") methods.init.apply(form); return methods[method].apply(form, Array.prototype.slice.call(arguments, 1)); } else if (typeof method == 'object' || !method) { // default constructor with or without arguments methods.init.apply(form, arguments); return methods.attach.apply(form); } else { $.error('Method ' + method + ' does not exist in jQuery.validationEngine'); }};// LEAK GLOBAL OPTIONS$.validationEngine= {defaults:{// Name of the event triggering field validationvalidationEventTrigger: "blur",// Automatically scroll viewport to the first errorscroll: true,// Focus on the first inputfocusFirstField:true,// Opening box position, possible locations are: topLeft,// topRight, bottomLeft, centerRight, bottomRightpromptPosition: "topRight",bindMethod:"bind",// internal, automatically set to true when it parse a _ajax ruleinlineAjax: false,// if set to true, the form data is sent asynchronously via ajax to the form.action url (get)ajaxFormValidation: false,// Ajax form validation callback method: boolean onComplete(form, status, errors, options)// retuns false if the form.submit event needs to be canceled.ajaxFormValidationURL: false,// The url to send the submit ajax validation (default to action)onAjaxFormComplete: $.noop,// called right before the ajax call, may return false to cancelonBeforeAjaxFormValidation: $.noop,// Stops form from submitting and execute function assiciated with itonValidationComplete: false,// better relative positioningrelative: false,// insert spacing when error prompts inserted if relative = True and relativePadding = True// Use it if you want to have your prompts below your field integratedrelativePadding: false,// Used when the form is displayed within a scrolling DIVisOverflown: false,overflownDIV: "",// Used when you have a form fields too close and the errors messages are on top of other disturbing viewing messagesdoNotShowAllErrosOnSubmit: false,// true if you want to vind the input fieldsbinded: true,// set to true, when the prompt arrow needs to be displayedshowArrow: true,// did one of the validation fail ? kept global to stop further ajax validationsisError: false,// Caches field validation status, typically only bad status are created.// the array is used during ajax form validation to detect issues early and prevent an expensive submitajaxValidCache: {},// Auto update prompt position after window resizeautoPositionUpdate: false,InvalidFields: [],onSuccess: false,onFailure: false,// Auto-hide promptautoHidePrompt: false,// Delay before auto-hideautoHideDelay: 10000,// Fade out duration while hiding the validationsfadeDuration: 0.3}};$(function(){$.validationEngine.defaults.promptPosition = methods.isRTL()?'topLeft':"topRight"});})(jQuery); 例子1

<div class="ht_mainBox">
     <form action="user_addUser.shtml" id="formID" method="post">
	<input type="hidden" name="myToken" value="1435114949665" />
	<input type="hidden" name="param" value="param" />
	<div class="relat">
	<span class="c_orange login_span2"></span>
	    <ul class="t-aligL reg_ul">
		<li>
			<span class="label">登录名:</span>
			<span class="re_input"> <input name="logName"
					type="text" value="" id="logName"
					class="validate[required,maxSize[50]]" /> </span>
					<span style="color: red">* </span>
				</li>
				<li>
					<span class="label">用户密码:</span>
					<span class="re_input"> <input name="logPwd"
							type="password" value="" id="logPwd"
							class="validate[required,custom[operatorPSW]]" /> </span>
							<span style="color: red">* </span>
				</li>
				<li>
					<span class="label">确认密码:</span>
					<span class="re_input"> <input name="password"
					type="password" value="" id="logPwd"
					class="validate[required,custom[operatorPSW]],equals[logPwd]" /> </span>
					<span style="color: red">* </span>
				</li>
				<li>
                                <li>
                                    <span class="label">联系电话:</span>
                                    <div class="img">
                                        <input  class="validate[required,custom[cellPhone]]" type="text" name="mobilePhone" id="t8" style="height:35px;width:150px;border:1px solid black"/>
                                        <span style="color: red">* </span>
                                    </div>
                                </li>
                                 <li>
                                    <span class="label">关于我们:</span>
                                    <div class="img">
                                        <textarea  class="validate[required,maxSize[400],minSize[20]]" id="t7" name="areaValue" rows="8" cols="200" style="border:1px solid black;"></textarea>
                                        <span style="color: red">* </span>
                                    </div>
                                </li>



 类似资料: