首页 > 代码库 > easyui validate -- radio、checkbox 校验扩展

easyui validate -- radio、checkbox 校验扩展

2024-11-16 17:49:39   203人阅读

1、extension.js:

$.extend($.fn.validatebox.defaults.rules, {
    radio: {  
        validator: function(value, param){  
            var input = $(param[0]),status = false;
            input.off(‘.radio‘).on(‘click.radio‘,function(){
                $(this).focus();
                try{ cntObj.tooltip(‘hide‘); }catch(e){}
            });
            var firstObj = $(input[0]),cntObj = firstObj.parent(),initCount = cntObj.attr("initCount") || 0;
            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){}
            });

            var tipMsg = firstObj.validatebox.defaults.missingMessage || firstObj.validatebox.defaults.rules.checkbox.message;
            if(initCount-1<0){
                firstObj.parent().tooltip({
                    position: ‘right‘,
                    content: ‘<span style="color:#fff">‘+tipMsg+‘</span>‘,
                    onShow: function(){
                        $(this).tooltip(‘tip‘).css({
                            backgroundColor: ‘#666‘,
                            borderColor: ‘#666‘
                        });
                    }
                }).tooltip(‘hide‘);
                initCount = initCount - 0 + 1;
                cntObj.attr("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;
            inputs.each(function () { 
                if (this.checked) checkNum++;
            });
            inputs.off(‘.checkbox‘).on(‘click.checkbox‘,function(){
                $(this).focus();
                var bool = inputs.validatebox(‘isValid‘);
                if(bool) $(this).parent().tooltip(‘destroy‘);
                else {
                    var tipMsg = $(this).validatebox.defaults.missingMessage || $(this).validatebox.defaults.rules.checkbox.message;
                    $(this).parent().tooltip({
                        position: ‘right‘,
                        content: ‘<span style="color:#fff">‘+tipMsg+‘</span>‘,
                        onShow: function(){
                            $(this).tooltip(‘tip‘).css({
                                backgroundColor: ‘#666‘,
                                borderColor: ‘#666‘
                            });
                        }
                    }).tooltip(‘show‘);
                }
            });
            status = checkNum > 0 && checkNum < 4;
            return status;
        },
        message: ‘Please choose options !‘
    }
});

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="http://www.mamicode.com/css/metro/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/demo.css">
    <script type="text/javascript" src="http://www.mamicode.com/js/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.mamicode.com/js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="http://www.mamicode.com/js/extension/extension.js"></script>
    <script type="text/javascript" src="http://www.mamicode.com/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="http://www.mamicode.com/1"  data-options="validType:‘radio[\‘#ff input[name=yes_no]\‘, \‘Yes or no\‘]‘">Yes
                            <input class="easyui-validatebox" type="radio" name="yes_no" value="http://www.mamicode.com/0">No
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Language:</td>
                    <td>
                        <div>
                            <input type="checkbox" name="cb1" class="easyui-validatebox" value="http://www.mamicode.com/1" validType="checkbox[‘#ff input[name=cb1]‘]"/>ck1
                            <input type="checkbox" name="cb1" class="easyui-validatebox" value="http://www.mamicode.com/2"/>ck2
                            <input type="checkbox" name="cb1" class="easyui-validatebox" value="http://www.mamicode.com/3" />ck3
                            <input type="checkbox" name="cb1" class="easyui-validatebox" value="http://www.mamicode.com/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>
View Code

 

easyui validate -- radio、checkbox 校验扩展


联系
我们