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

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

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGlhbmdydWkxOTg4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/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>

easyUI 验证控件应用、自己定义、扩展验证 手机号码或电话话码格式的更多相关文章

  1. 验证控件插图扩展控件ValidatorCalloutExtender（用于扩展验证控件）和TextBoxWatermarkExtender

    <asp:ScriptManager ID="ScriptManager1" runat="server">  </asp:ScriptMan ...

  2. 在usercontrol中如何使用验证控件CustomValidator 中的客户端验证

    在用户控件中,为一个文本控件添加CustomValidator验证,然后设置CustomValidator 的ClientValidationFunction 属性为客户端的Validate(sour ...

  3. WebForm服务器验证控件与前端js自定义验证共同使用

        问题: 前端aspx页面中需要在button中添加OnClientClick事件后,这个OnClientClick所执行的自定义的客户端js验证:这个时候,所有的服务器验证控件都会失效!   ...

  4. 上传预览 easyui部分控件获取focuse 表单验证

    js: $(document).ready(function () { //$('#creater').combobox({ // url: '/VMS.UI/BindData/ScheamData? ...

  5. (转)[jQuery]使用jQuery.Validate进行客户端验证（初级篇）——不使用微软验证控件的理由

    以前在做项目的时候就有个很大心病,就是微软的验证控件,虽然微软的验证控件可以帮我们完成大部分的验证,验证也很可靠上手也很容易,但是我就是觉得不爽,主要理由有以下几点: 1.拖控件太麻烦,这个是微软控件 ...

  6. webForm中的验证控件

    1.非空验证控件:RequireFieldValidator  :2.数据比较验证:CompareValidator :3.数据范围验证:RangeValidator :4.正则表达式验证:Regul ...

  7. asp.net中验证控件的使用方法

    用于检查是否有输入值 :RequiredFieldValidator(必须字段验证) 按设定比较两个输入 :CompareValidator(比较验证) 输入是否在指定范围 :RangeValidat ...

  8. 强大的ASP.NET控件---验证控件

        学习完了牛腩之后,在进行ASP.NET的学习的时候,对全部学的知识.都有一种似曾相识的感觉,"哦,这个,在牛腩新闻公布系统中用过".仅仅只是那时候.用的也是迷迷糊糊的,就说 ...

  9. 【ASP.NET】验证控件

    在软件开发中,验证输入信息是否正确,这是不可缺少的一项工作.就拿我们做过的机房收费系统来说,在登录的时候,我们须要对username和用户password进行验证.推断是否为空,推断输入字符是否合理等 ...

随机推荐

  1. No-4.文件和目录常用命令

    文件和目录常用命令 结构 查看目录内容 ls 切换目录 cd 创建和删除操作 touch rm mkdir 拷贝和移动文件 cp mv 查看文件内容 cat more grep 其他 echo 重定向 ...

  2. modify django app models.py adn settings.py

    from django.db import models from django.contrib import admin # from personal import models class Us ...

  3. bzoj3336 Uva10572 Black and White

    题目描述: 数据范围:2<=n,m<=8 题解: 很明显需要状压.但是怎么压不知道,压什么不知道. 然后从条件下手. 条件1要求黑色在一起白色在一起,记录轮廓线很容易做到. 条件2要求不能 ...

  4. [CF] 219D Choosing Capital for Treeland

    题意翻译 题目描述 Treeland国有n个城市,这n个城市连成了一颗树,有n-1条道路连接了所有城市.每条道路只能单向通行.现在政府需要决定选择哪个城市为首都.假如城市i成为了首都,那么为了使首都能 ...

  5. MySQL索引之博客荐读

    推荐博客: 寒江独钓. 浅谈算法和数据结构: 十 平衡查找树之B树 张洋. MySQL索引背后的数据结构及算法原理 漫画算法:什么是 B+ 树? B树和B+树的插入.删除图文详解 Jeremy Col ...

  6. mysql优化之参数优化（转）

    1.优化方式 硬件优化=>系统优化=>mysql配置优化=>SCHEMA优化=>sql优化=>其他解决方案(redis or MongoDB or Cassandra o ...

  7. Wall Treatment

    * wall treatment You can combine the turbulent flow interfaces with different types of wall treatmen ...

  8. STM32开发环境--使用MDK建立一个工程

    STM32开发环境--使用MDK建立一个工程 该工程模版是基于库函数基础制作而成,其中有借鉴相关资料.虽然工程模版一旦建立,以后任何项目只需套用即可,但考虑到长时间不使用,在将来某天可能会突然用到,再 ...

  9. selenium 3+python3.6+firefox的windows详细环境搭建以及小demo

    最近也是学习了下selenium和python,就记录了下在自己工作机上环境的搭建过程以及小demo 1,安装python3.6.1 我是去官网直接下载当前最新版的python3.6.1 官网网址为h ...

  10. IDEA maven 无法加载已经安装的模块依赖包

    今天打包一直报如下错误 Reactor Summary for freechain-op 1.0.1.OP: [INFO] [INFO] freechain-op .................. ...