玩转EasyUI之ValidateBox
2015-08-31 18:27
429 查看
需求背景
在如下界面中,要求客户端能自动验证用户输入的内容是否符合要求。其效果就是图中邮箱地址的效果,如果不符合要求,则用easyUI本身的样式来提示。这里邮箱的验证已经完成,可手机号码的验证却没有成功。邮箱地址的代码:
<tr style="font-size: 14px;">
<th style="width: 190px; text-align: right; font-weight: normal">手机号:</th>
<th style="width: 190px;">
<input class ="easyui-validatebox" data-options="required:true,validType:'Mobile'" maxlength=11 style="width:190px" id="TelNum" type="text"value="@ViewData["TelNum"]" required="required" />
</th>
<th style="width: 190px; text-align: right; font-weight: normal">邮箱地址:</th>
<th style="width: 220px;">
<input class ="easyui-validatebox" data-options="validType:'email'" style="width:208px" id="Email" type="text" value="@ViewData["Email"]" required="required" maxlength=30 />
</th>
</tr>
------------------------------------------------------------------------------------------------------
问题分析
验证的问题之前在学习ASP.Net的时候已经用到过了,ASP.Net中把验证封装成为验证控件,作用于某个具体的需要被验证的控件。所以类比学习,EasyUI的封装也应该是这个道理。可是现在ValidType中email能用,Mobile不能用,为什么呢?可以可能的是问题一定是出现在EasyUI这里了。当找不到问题的根源时,只能提出基于一定知识和能力基础下的假想了。
可能1:EasyUI可能不是使用Mobile这个关键字。
可能2:EasyUI可能根本没有封装手机号的验证方法。
--------------------------------------------------------------------------------------------------
实践过程
可能1:
我把Mobile中的M采用小写试了试,同样不能用,果断放弃。可能2:
面对第二种可能性,我去网上转了转。果然有不少介绍类似问题的文章,于是现学现卖。1、新建一个JS文件
2、编写代码如下:
$.extend($.fn.validatebox.defaults.rules, {
//移动手机号码验证
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.'
},
})
3、界面引用新建的JS文件
刷新网页,测试成功!
------------------------------------------------------------------------------------------------------
思考总结
1、EasyUI虽然已经很强大,但它也不是万能的。不要迷信权威。2、学会思考比掌握知识要重要,因为前一个代表未来,后一个代表过去。
3、学习过程中要善于做Demo。在学习过程中肯定会遇到暂时不是很明白的问题,做一个小Demo也许能让我们入门,然后快速提高。再打的问题都能分解,然后逐个突破。
------------------------------------------------------------------------------------------------------
知识补充
更多拓展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.'
},
})
相关文章推荐
- easyui------显示隐藏列功能
- jQuery寻找n以内完全数的方法
- 推荐10个2014年最佳的jQuery视频插件
- jquery+CSS3实现淘宝移动网页菜单效果
- 采用easyui tree编写简单角色权限代码的方法
- 基于jquery中children()与find()的区别介绍
- 了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
- JQuery打造PHP的AJAX表单提交实例
- jquery easyui使用心得
- 初试jQuery EasyUI 使用介绍
- easyui Droppable组件实现放置特效
- jQuery实现的fixedMenu下拉菜单效果代码
- 浅谈jQuery构造函数分析
- 在VS2008中使用jQuery智能感应的方法
- 从Ajax到JQuery Ajax学习
- jQuery仿gmail实现fixed布局的方法
- jQuery判断当前点击的是第几个li的代码
- jQuery判断一个元素是否可见的方法
- jquery.validate的使用说明介绍
- jquery 常用操作整理 基础入门篇