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
        });

 

posted @ 2016-04-01 15:53  龍☆  阅读(2537)  评论(0编辑  收藏  举报