easyui validate -- radio、checkbox 校验扩展，事件域名

事件域名： $(dom).on('click.myNameSpace',function(){ ... })，其中‘.myNameSpace’便是域名；

　　　　　 目前作用：$(dom).off('click.myNameSpace')，解绑指定的域名事件，其他绑定的click逻辑依旧正常。

1、extension.js:

// extend the [phone,idCard,date,time,radio,checkbox] rules    
$.extend($.fn.validatebox.defaults.rules, {    
    phone: {    
        validator: function(value,param){
            if(!(/^1[34578]\d{9}$/.test(value))) return false; 
            return true;
        },    
        message: 'Field do not match.'   
    },
    idCard: {    
        validator: function(value,param){
            var reg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/;
            if(reg.test(value)) return true; 
            return false;
        },    
        message: 'Field do not match.'   
    },
    date: {    
        validator: function(value,param){
            var reg = /((^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(10|12|0?[13578])([-\/\._])(3[01]|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(11|0?[469])([-\/\._])(30|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(0?2)([-\/\._])(2[0-8]|1[0-9]|0?[1-9])$)|(^([2468][048]00)([-\/\._])(0?2)([-\/\._])(29)$)|(^([3579][26]00)([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][0][48])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][0][48])([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][2468][048])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][2468][048])([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][13579][26])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][13579][26])([-\/\._])(0?2)([-\/\._])(29)$))/;
            if(reg.test(value)) return true; 
            return false;
        },    
        message: 'Field do not match.'
    },
    time: {    
        validator: function(value,param){
            var reg = /^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-)) (20|21|22|23|[0-1]?\d):[0-5]?\d:[0-5]?\d$/;
            if(reg.test(value)){
                return true; 
            } 
            return false;
        },    
        message: 'Field do not match.'   
    },
    radio: {  
        validator: function(value, param){  
            var input = $(param[0]),status = false,firstObj = $(input[0]),
                cntObj = firstObj.parent(),initCount = cntObj.attr("initCount") || 0;
            input.off('.radio').on('click.radio',function(){
                $(this).focus();
                try{ cntObj.tooltip('hide'); }catch(e){}
            });
            cntObj.off("mouseover mouseout").on("mouseover mouseout",function(event){
                var bool = input.validatebox('isValid');
                if(event.type == "mouseover"){
                    if(bool) try{ cntObj.tooltip('hide'); }catch(e){}
                    else try{ cntObj.tooltip('show');}catch(e){}
                }else if(event.type == "mouseout") try{ cntObj.tooltip('hide'); }catch(e){}
            });
            if(initCount-1<0){
                tipProcess(firstObj,"initCount");
                initCount ++ ;
            }
            status = $(param[0] + ':checked').val() != undefined;
            return status;
        },  
        message: 'Please choose option for {1}.'  
    },
    checkbox: {
        validator: function (value, param) {
            var inputs = $(param[0]), maxNum = param[1], checkNum = 0,status=false,
                firstObj = $(inputs[0]),cntObj = firstObj.parent(),initCount = cntObj.attr("initCount") || 0;
            inputs.each(function () { 
                if (this.checked) checkNum++;
            });
            inputs.off('.checkbox').on('click.checkbox',function(){
                //$(this).focus();
                var bool = inputs.validatebox('isValid');
                if(bool) try{ cntObj.tooltip('hide'); }catch(e){}
                else try{ cntObj.tooltip('show');}catch(e){}
            });
            cntObj.off("mouseover mouseout").on("mouseover mouseout",function(event){
                var bool = inputs.validatebox('isValid');
                if(event.type == "mouseover"){
                    if(bool) try{ cntObj.tooltip('hide'); }catch(e){}
                    else try{ cntObj.tooltip('show');}catch(e){}
                }else if(event.type == "mouseout") try{ cntObj.tooltip('hide'); }catch(e){}
            });
            if(initCount-1<0){
                tipProcess(firstObj,"initCount");
                initCount ++ ;
            }
            status = checkNum > 0 ;
            return status;
        },
        message: 'Please choose options !'
    }
});
function tipProcess(firstObj,countFlag){
    var dataOps = firstObj.validatebox('options'),ctn=firstObj.parent(),
        tipMsg = dataOps.missingMessage || dataOps.invalidMessage || firstObj.validatebox.defaults.rules.checkbox.message;
    ctn.tooltip({ position: 'right', content: '<span style="color:#000">'+tipMsg+'</span>',
        onShow: function(){
            $(this).tooltip('tip').css({
                backgroundColor: 'rgb(255, 255, 204)',
                borderColor: 'rgb(204, 153, 51)'
            });
        }
    }).tooltip('hide');
    var initCount = 0;
    if(countFlag) {
        initCount = ctn.attr(countFlag);
        initCount = initCount - 0 + 1;
        ctn.attr(countFlag,initCount);
    }
}

 

2、html：（相关资源自行引入）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Validate Form on Submit - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="css/metro/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/icon.css">
    <link rel="stylesheet" type="text/css" href="css/demo.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/extension/extension.js"></script>
    <script type="text/javascript" src="js/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
    <h2>Validate Form on Submit</h2>
    <p>The form does not perform validation before being submitted.</p>
    <div style="margin:20px 0;"></div>
    <div class="easyui-panel" title="New Topic" style="width:400px">
        <div style="padding:10px 60px 20px 60px">
        <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
            <table cellpadding="5">
                <tr>
                    <td>Name:</td>
                    <td><input class="easyui-textbox" type="text" name="name" data-options="required:true"></input></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><input class="easyui-textbox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
                </tr>
                <tr>
                    <td>Subject:</td>
                    <td><input class="easyui-textbox" type="text" name="subject" data-options="required:true"></input></td>
                </tr>
                <tr>
                    <td>Message:</td>
                    <td>
                        <div>
                            <input class="easyui-validatebox" type="radio" name="yes_no" value="1"  data-options="validType:'radio[\'#ff input[name=yes_no]\', \'Yes or no\']'">Yes
                            <input class="easyui-validatebox" type="radio" name="yes_no" value="0">No
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Language:</td>
                    <td>
                        <div>
                            <input type="checkbox" name="cb1" class="easyui-validatebox" value="1" validType="checkbox['#ff input[name=cb1]']"/>ck1
                            <input type="checkbox" name="cb1" class="easyui-validatebox" value="2"/>ck2
                            <input type="checkbox" name="cb1" class="easyui-validatebox" value="3" />ck3
                            <input type="checkbox" name="cb1" class="easyui-validatebox" value="4" />ck4
                        </div>
                    </td>
                </tr>
            </table>
        </form>
        <div style="text-align:center;padding:5px">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">Clear</a>
        </div>
        </div>

    </div>
    <script>
        function submitForm(){
            $('#ff').form('submit',{
                onSubmit:function(){
                    return $(this).form('enableValidation').form('validate');
                }
            });
        }
        function clearForm(){
            $('#ff').form('clear');
        }
        
    </script>
</body>
</html>