jQuery Validation Engine 表单验证
Posted 龍☆
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery Validation Engine 表单验证相关的知识，希望对你有一定的参考价值。
http://code.ciaoca.com/jquery/validation-engine/
http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
一个基于jQuery的数据验证插件，比较好用
其中自定义验证需要在：jquery.validationEngine-zh-CN.js jquery.validationEngine-zh-EN.js中分别实现
例如添加一个验证：在一个class为js_needSum 的层中的input 输入的数字之和为100
(function($){ // 验证规则 $.fn.validationEngineLanguage = function(){}; $.validationEngineLanguage = { newLang:function(){ $.validationEngineLanguage.allRules = { "requiredInFunction": { "func": function(field,rules,i,options){ //alert("11"+field.attr(‘type‘)); var objs = field.parents(".js_needonlyone").find("input"); var bFg = false; for(var j=0; j< objs.length; j++){ if(objs.eq(j).is(":checked")){ bFg = true; break; } } return (bFg) ? true : false; }, "alertText": "* ‘升级选项‘和‘降级选项‘必须选择一个" }, "SumEqual100": { "func": function (field, rules, i, options) { //alert("11"+field.attr(‘type‘)); var objs = field.parents(".js_needSum").find("input"); var bFg = false; var sum = 0; for (var j = 0; j < objs.length; j++) { //alert(objs.eq(j).val()?"":"0"); sum += parseFloat(objs.eq(j).val() == "" ? "0" : objs.eq(j).val()); } if (sum == 100) { bFg = true; } return (bFg) ? true : false; }, "alertText": "和必须为100" }, "SumEqual1": { "func": function (field, rules, i, options) { //alert("11"+field.attr(‘type‘)); var objs = field.parents(".js_needSum").find("input"); var bFg = false; var sum = 0; for (var j = 0; j < objs.length; j++) { sum += parseFloat(objs.eq(j).val() == "" ? "0" : objs.eq(j).val()); } if (sum == 1) { bFg = true; } return (bFg) ? true : false; }, "alertText": "和必须为1" }, "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":"* 日期需在 ", "alertText2":" 之前" }, "future":{ "regex":"none", "alertText":"* 日期需在 ", "alertText2":" 之后" }, "maxCheckbox":{ "regex":"none", "alertText":"* 最多选择 ", "alertText2":" 个项目" }, "minCheckbox":{ "regex":"none", "alertText":"* 最少选择 ", "alertText2":" 个项目" }, "equals":{ "regex":"none", "alertText":"* 两次输入的密码不一致" }, "creditCard": { "regex": "none", "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]{1,3})([,][0-9]{3})*)|([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":"* 无效的网址" }, "onlyNumberSp":{ "regex":/^[0-9\ ]+$/, "alertText":"* 只能填写数字" }, "onlyLetterSp":{ "regex":/^[a-zA-Z\ \‘]+$/, "alertText":"* 只能填写英文字母" }, "onlyLetterNumber":{ "regex":/^[0-9a-zA-Z]+$/, "alertText":"* 只能填写数字与英文字母" }, //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" }, ‘numberAndInteger‘:{ ‘regex‘:/^[0-9]+\.?[0-9]{0,2}$/, ‘alertText‘:‘请输入整数或小数‘ }, ‘chinaZip‘:{ ‘regex‘:/[1-9]{1}[0-9]{5}/, ‘alertText‘:‘请6位数邮政编码‘ }, // 自定义规则示例，提供参考，可删除 "validate2fields": { "alertText": "* 请输入 HELLO" }, "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": "* 正在确认名称是否有其他人使用，请稍等。" } }; } }; $.validationEngineLanguage.newLang(); })(jQuery);
调用html：
<li> <div class="js_needSum"> <p><label>A<input type="text" class="text fwd40 validate[custom[numberAndInteger]]" /></label></p> <p><label>B<input type="text" class="text fwd40 validate[custom[numberAndInteger]]" /></label></p> <p><label>C<input type="text" class="text fwd40 validate[required,custom[numberAndInteger],custom[SumEqual100]]" /></label></p> </div> </li>
表单提交时需要引用验证引擎：
jQuery(‘.js_form‘).validationEngine({ showOneMessage: true, ajaxFormValidation: true, ajaxFormValidationMethod: ‘post‘, //onBeforeAjaxFormValidation: showLoading, onAjaxFormComplete: ajaxValidationCallback });
以上是关于jQuery Validation Engine 表单验证的主要内容，如果未能解决你的问题，请参考以下文章
验证控件jQuery Validation Engine简单自定义正则表达式
验证控件jQuery Validation Engine调用外部函数验证