easyUI 验证控件应用、自定义、扩展验证 手机号码或电话话码格式
2014-10-16 11:42
369 查看
easyUI 验证控件应用、自定义、扩展验证 手机号码或电话话码格式
在API中 发现给的demo 中没有这个验证,所以就研究了下.
相关介绍省略,直接上代码吧!
![](http://img.blog.csdn.net/20141016114451816?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGlhbmdydWkxOTg4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](http://img.blog.csdn.net/20141016114821574?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGlhbmdydWkxOTg4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](http://img.blog.csdn.net/20141016114502923?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGlhbmdydWkxOTg4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
在API中 发现给的demo 中没有这个验证,所以就研究了下.
相关介绍省略,直接上代码吧!
<!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 验证控件应用、自定义、扩展验证 手机号码或电话话码格式
- easyUI 验证控件应用、自定义、扩展验证 手机号码或电话话码格式
- easyUI 验证控件应用、自己定义、扩展验证 手机号码或电话话码格式
- ★★★【卡法 常用js库】: js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度
- CustomValidator控件 电话和手机号码验证
- ASP.NET手机号码格式验证js版
- 正则表达式在asp里的简单应用,验证手机号码
- jquery验证手机号码、邮箱格式是否正确
- android ip地址,手机号码,邮箱格式验证
- js正则表达式用法实例:验证邮箱格式、密码复杂度、手机号码、QQ号码
- php 验证手机号码格式
- EasyUI 扩展自定义EasyUI校验规则 验证规则(常用的)
- checkboxlist 选择为空时的判断(customvalidator[用户自定义验证控件]的应用):
- 使用jquery.validate自定义方法实现"手机号码或者固话至少填写一个"的逻辑验证
- html5表单pattern属性配合正则验证电话和手机号码
- EasyUI 扩展验证控件规则
- JS应用:手机号码验证
- Easyui validatebox修改——1.当text发生变化时在校验,2.取消校验,3扩展自定义验证
- Easyui validatebox修改——1.当text发生变化时在校验,2.取消校验,3扩展自定义验证
- js正则表达式——验证邮箱格式、邮编、身份证号码、是否为空、下拉框选项、密码、手机号码、电话号码