easyUI 验证控件应用、自定义、扩展验证手机号码或电话话码格式

dabinglibrary 2016-02-17

展开全文

转：http://blog.csdn.net/liangrui1988/article/details/40145707?utm_source=tuicool&utm_medium=referral

easyui官方demo: http://www./demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem=#

easyUI 验证控件应用、自定义、扩展验证手机号码或电话话码格式

在API中发现给的demo 中没有这个验证，所以就研究了下.

相关介绍省略，直接上代码吧!

[html] view plaincopy
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  
<title>Insert title here</title>  
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4/themes/default/easyui.css"/>      
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4/themes/icon.css"/>      
    <script type="text/javascript" src="jquery-easyui-1.4/jquery.min.js"></script>      
    <script type="text/javascript" src="jquery-easyui-1.4/jquery.easyui.min.js"></script>      
    <script type="text/javascript" src="jquery-easyui-1.4/locale/easyui-lang-zh_CN.js"></script>    
</head>  
<body>  
 <h2>Custom ValidateBox Tooltip</h2>  
    <p>This sample shows how to display another tooltip message on a valid textbox.</p>  
    <div style="margin:20px 0;"></div>  
    <div class="easyui-panel" title="Register" style="width:400px;padding:10px 60px 20px 60px">  
        <table cellpadding="5">  
            <tr>  
                <td>User Name:</td>  
                <td><input class="easyui-validatebox textbox" data-options="required:true,validType:'length[3,10]'"></td>  
            </tr>  
            <tr>  
                <td>Email:</td>  
                <td><input class="easyui-validatebox textbox" data-options="prompt:'Enter a valid email.',required:true,validType:'email'"></td>  
            </tr>  
            <tr>  
                <td>Birthday:</td>  
                <td><input class="easyui-datebox"></td>  
            </tr>  
            <tr>  
                <td>URL:</td>  
                <td><input class="easyui-validatebox textbox" data-options="prompt:'Enter your URL.',required:true,validType:'url'"></td>  
            </tr>  
            <tr>  
                <td>Phone:</td>  
                <td><input class="easyui-validatebox textbox" data-options="prompt:'Enter your phone number.',required:true"></td>  
            </tr>  
              
             <tr>  
                <td>extneds 联系电话 test:</td>  
                <td><input class="easyui-validatebox" data-options="validType:'phoneRex'"></td>  
            </tr>  
        </table>  
    </div>  
    <style scoped="scoped">  
        .textbox{  
            height:20px;  
            margin:0;  
            padding:0 2px;  
            box-sizing:content-box;  
        }  
    </style>  
    <script>  
      
      
     //自定义验证  
    $.extend($.fn.validatebox.defaults.rules, {  
    phoneRex: {  
        validator: function(value){  
        var rex=/^1[3-8]+\d{9}$/;  
        //var rex=/^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/;  
        //区号：前面一个0，后面跟2-3位数字 ： 0\d{2,3}  
        //电话号码：7-8位数字： \d{7,8  
        //分机号：一般都是3位数字： \d{3,}  
         //这样连接起来就是验证电话的正则表达式了：/^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/          
        var rex2=/^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/;  
        if(rex.test(value)||rex2.test(value))  
        {  
          // alert('t'+value);  
          return true;  
        }else  
        {  
         //alert('false '+value);  
           return false;  
        }  
            
        },  
        message: '请输入正确电话或手机格式'  
    }  
});  
  
        $(function(){  
            $('input.easyui-validatebox').validatebox({  
                tipOptions: {    // the options to create tooltip  
                    showEvent: 'mouseenter',  
                    hideEvent: 'mouseleave',  
                    showDelay: 0,  
                    hideDelay: 0,  
                    zIndex: '',  
                    onShow: function(){  
                        if (!$(this).hasClass('validatebox-invalid')){  
                            if ($(this).tooltip('options').prompt){  
                                $(this).tooltip('update', $(this).tooltip('options').prompt);  
                            } else {  
                                $(this).tooltip('tip').hide();  
                            }  
                        } else {  
                            $(this).tooltip('tip').css({  
                                color: '#000',  
                                borderColor: '#CC9933',  
                                backgroundColor: '#FFFFCC'  
                            });  
                        }  
                    },  
                    onHide: function(){  
                        if (!$(this).tooltip('options').prompt){  
                            $(this).tooltip('destroy');  
                        }  
                    }  
                }  
            }).tooltip({  
                position: 'right',  
                content: function(){  
                    var opts = $(this).validatebox('options');  
                    return opts.prompt;  
                },  
                onShow: function(){  
                    $(this).tooltip('tip').css({  
                        color: '#000',  
                        borderColor: '#CC9933',  
                        backgroundColor: '#FFFFCC'  
                    });  
                }  
            });  
        });  
    </script>  
</body>  
   
</body>  
</html>  