easyui的validatebox

最新推荐文章于 2018-12-03 22:01:49 发布

peter_qyq

最新推荐文章于 2018-12-03 22:01:49 发布

阅读量587

点赞数 1

分类专栏： JavaScript/Jquery 文章标签： easyui

本文链接：https://blog.csdn.net/peter_qyq/article/details/52022092

版权

JavaScript/Jquery 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

对jquery.validatebox.js进行扩展，新建js文件，可以取名为：validatebox.js，这个文件中的内容如下：

//扩展easyui表单的验证  
    $.extend($.fn.validatebox.defaults.rules, {  
        //验证汉字  
        CHS: {  
            validator: function (value) {  
                return /^[\u0391-\uFFE5]+$/.test(value);  
            },  
            message: 'The input Chinese characters only.'  
        },  
        //移动手机号码验证  
        Mobile: {//value值为文本框中的值  
            validator: function (value) {  
                var reg = /^1[3|4|5|8|9]\d{9}$/;  
                return reg.test(value);  
            },  
            message: 'Please enter your mobile phone number correct.'  
        },  
        //国内邮编验证  
        ZipCode: {  
            validator: function (value) {  
                var reg = /^[0-9]\d{5}$/;  
                return reg.test(value);  
            },  
            message: 'The zip code must be 6 digits and 0 began.'  
        },  
      //数字  
        Number: {  
            validator: function (value) {  
                var reg =/^[0-9]*$/;  
                return reg.test(value);  
            },  
            message: 'Please input number.'  
        },  
    })

HTML页面：

    <!DOCTYPE html>  
    <html>  
    <head>  
        <meta charset="gb2312">  
        <title>Basic ValidateBox - jQuery EasyUI Demo</title>  
        <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">  
        <link rel="stylesheet" type="text/css" href="../../themes/icon.css">  
        <link rel="stylesheet" type="text/css" href="../demo.css">  
        <script type="text/javascript" src="../../jquery.min.js"></script>  
        <script type="text/javascript" src="../../jquery.easyui.min.js"></script>  
       <span style="font-family:Courier New;"> </span><script src="validatebox.js" type="text/javascript"></script>  <!--引入刚创建的js文件-->  
    </head>  
    <body>  
          
            <h2>常用验证格式</h2>   
        <div style="margin:20px 0;"></div>  
        <div class="easyui-panel" title="Register" style="width:400px;padding:10px 60px 20px 60px">  
            <table cellpadding="10">  
                <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="required:true,validType:'email'"></td>  
                </tr>  
                <tr>  
                    <td>Birthday:</td>  
                    <td><input class="easyui-datebox textbox"></td>  
                </tr>  
                <tr>  
                    <td>URL:</td>  
                    <td><input class="easyui-validatebox textbox" data-options="required:true,validType:'url'"></td>  
                </tr>  
                <tr>  
                    <td>Mobile:</td>  
                    <td><input class="easyui-validatebox textbox" data-options="required:true,validType:'Mobile'"></td>  
                </tr>  
                <tr>  
                    <td>Length:</td>  
                    <td><input class="easyui-validatebox" data-options="required:true,validType:'length[0,2]'"></td>  
                </tr>  
                <tr>  
                    <td>Chinese:</td>  
                    <td><input name="txtName" class="easyui-validatebox" data-options="required:'true',validType:'CHS'"></td>  
      
                </tr>  
      
                <tr>  
                    <td>ZipCode:</td>  
                    <td><input name="txtName" class="easyui-validatebox" data-options="required:'true',validType:'ZipCode'"></td>  
      
                </tr>  
                <tr>  
                    <td>Number:</td>  
                    <td><input name="txtName" class="easyui-validatebox" data-options="required:'true',validType:'Number'"></td>  
      
                </tr>  
      
            </table>  
        </div>  
        <style scoped="scoped">  
            .textbox{  
                height:20px;  
                margin:0;  
                padding:0 2px;  
                box-sizing:content-box;  
            }  
        </style>

实现效果如下：

总结