`
backspace
  • 浏览: 137180 次
文章分类
社区版块
存档分类
最新评论

JQueryEasyUI validatebox 扩展其自带验证方法

 
阅读更多

JQueryEasyUI validatebox自带了几种自带的验证方法,比如非空、邮箱、异步、字符长短等验证方式,但是这些远远满足不了我们自己的使用,先整理了一些扩展方法,使其验证方式更为丰富!

  1 $.extend($.fn.validatebox.defaults.rules,{
  2 minLength:{// 判断最小长度
  3 validator:function(value,param) {
  4 returnvalue.length>=param[0];
  5 },
  6 message:'最少输入 {0} 个字符。'
  7 },
  8 length:{validator:function(value,param){
  9 varlen=$.trim(value).length;
 10 returnlen>=param[0]&&len<=param[1];
 11 },
 12 message:"输入内容长度必须介于{0}和{1}之间."
 13 },
 14 phone:{// 验证电话号码
 15 validator:function(value) {
 16 return/^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
 17 },
 18 message:'格式不正确,请使用下面格式:020-88888888'
 19 },
 20 mobile:{// 验证手机号码
 21 validator:function(value) {
 22 return/^(13|15|18)\d{9}$/i.test(value);
 23 },
 24 message:'手机号码格式不正确'
 25 },
 26 idcard:{// 验证身份证
 27 validator:function(value) {
 28 return/^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value);
 29 },
 30 message:'身份证号码格式不正确'
 31 },
 32 intOrFloat:{// 验证整数或小数
 33 validator:function(value) {
 34 return/^\d+(\.\d+)?$/i.test(value);
 35 },
 36 message:'请输入数字,并确保格式正确'
 37 },
 38 currency:{// 验证货币
 39 validator:function(value) {
 40 return/^\d+(\.\d+)?$/i.test(value);
 41 },
 42 message:'货币格式不正确'
 43 },
 44 qq:{// 验证QQ,从10000开始
 45 validator:function(value) {
 46 return/^[1-9]\d{4,9}$/i.test(value);
 47 },
 48 message:'QQ号码格式不正确'
 49 },
 50 integer:{// 验证整数
 51 validator:function(value) {
 52 return/^[+]?[1-9]+\d*$/i.test(value);
 53 },
 54 message:'请输入整数'
 55 },
 56 chinese:{// 验证中文
 57 validator:function(value) {
 58 return/^[\u0391-\uFFE5]+$/i.test(value);
 59 },
 60 message:'请输入中文'
 61 },
 62 english:{// 验证英语
 63 validator:function(value) {
 64 return/^[A-Za-z]+$/i.test(value);
 65 },
 66 message:'请输入英文'
 67 },
 68 unnormal:{// 验证是否包含空格和非法字符
 69 validator:function(value) {
 70 return/.+/i.test(value);
 71 },
 72 message:'输入值不能为空和包含其他非法字符'
 73 },
 74 username:{// 验证用户名
 75 validator:function(value) {
 76 return/^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i.test(value);
 77 },
 78 message:'用户名不合法(字母开头,允许6-16字节,允许字母数字下划线)'
 79 },
 80 faxno:{// 验证传真
 81 validator:function(value) {
 82 // return /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/i.test(value);
 83 return/^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
 84 },
 85 message:'传真号码不正确'
 86 },
 87 zip:{// 验证邮政编码
 88 validator:function(value) {
 89 return/^[1-9]\d{5}$/i.test(value);
 90 },
 91 message:'邮政编码格式不正确'
 92 },
 93 ip:{// 验证IP地址
 94 validator:function(value) {
 95 return/d+.d+.d+.d+/i.test(value);
 96 },
 97 message:'IP地址格式不正确'
 98 },
 99 name:{// 验证姓名,可以是中文或英文
100 validator:function(value) {
101 return/^[\u0391-\uFFE5]+$/i.test(value)|/^\w+[\w\s]+\w+$/i.test(value);
102 },
103 message:'请输入姓名'
104 },
105 carNo:{
106 validator:function(value){
107 return/^[\u4E00-\u9FA5][\da-zA-Z]{6}$/.test(value); 
108 },
109 message:'车牌号码无效(例:粤J12350)'
110 },
111 carenergin:{
112 validator:function(value){
113 return/^[a-zA-Z0-9]{16}$/.test(value); 
114 },
115 message:'发动机型号无效(例:FG6H012345654584)'
116 },
117 email:{
118 validator:function(value){
119 return/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value); 
120 },
121 message:'请输入有效的电子邮件账号(例:abc@126.com)'
122 },
123 msn:{
124 validator:function(value){
125 return/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value); 
126 },
127 message:'请输入有效的msn账号(例:abc@hotnail(msn/live).com)'
128 },same:{
129 validator:function(value,param){
130 if($("#"+param[0]).val() !=""&&value!=""){
131 return$("#"+param[0]).val() ==value; 
132 }else{
133 returntrue;
134 }
135 },
136 message:'两次输入的密码不一致!'
137 }
138 });

使用方法:

<input id="vv" class="easyui-validatebox" data-options="validType:'chinese'" />  

希望这些对大家有帮助吧!

 

分享到:
评论

相关推荐

    easyui validatebox 验证类型

    easyui validatebox 验证类型

    jQuery+easyui validatebox 验证框

    在IT行业中,前端开发是构建用户界面的关键环节,而jQuery和...总的来说,jQuery+EasyUI validatebox是实现高效、友好的前端表单验证的强大工具,通过合理的配置和扩展,可以满足各种复杂的验证需求,提升用户体验。

    easyui validatebox验证类型

    ValidateBox 也允许用户自定义验证规则,例如可以使用 jQuery 的 extend 方法来扩展 ValidateBox 的规则,例如可以添加身份证号码、电话号码、手机号码等验证规则。 EasyUI 的 ValidateBox 验证组件提供了多种类型...

    jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法

    标题和描述中提到的知识点涉及jQuery EasyUI框架中的validatebox插件,该插件用于表单输入验证。validatebox允许前端对用户输入进行校验,以减少服务器的负担并提升用户体验。它提供了基本的校验规则,但有时可能...

    jQuery EasyUI API 中文文档 - ValidateBox验证框

    综上所述,jQuery EasyUI 的 ValidateBox 组件为开发者提供了强大的表单验证功能,不仅可以实现基本的必填和格式验证,还能通过自定义规则和 AJAX 验证来满足更复杂的需求。通过灵活地配置属性和扩展验证规则,...

    jquery easyui validatebox remote的使用详解

    总结起来,jquery easyui validatebox的remote属性是实现复杂验证规则的有效方式,它将前端验证与后端验证相结合,为开发者提供了一种灵活的输入验证解决方案。通过这种方式,可以充分利用服务器端的资源和验证逻辑...

    JQuery easyUI扩展验证机制的正则表达式

    在JQuery easyUI中,可以通过`.extend()`方法对`$.fn.validatebox.defaults.rules`对象进行扩展,添加自定义的验证规则。下面将逐一介绍文档中给出的一些典型验证规则及其正则表达式的实现方式。 #### 三、具体验证...

    Jquery Easyui验证组件ValidateBox使用详解(20)

    通过以上内容,我们可以看到`Jquery Easyui`的验证组件`ValidateBox`不仅提供了丰富的内置验证类型,还支持自定义验证规则,使得我们可以根据项目需求灵活地进行表单验证。这大大简化了前端数据验证的工作,提升了...

    JQuery EasyUI 1.0.5 离线文档

    jQuery EasyUI 1.0.5增加了validatebox组件的的校验器。 4. jQuery EasyUI 1.0.5改进了dialog组件,目前dialog组件可以从标记中读取collapsible,minimizable,maximizable和 resizable属性 5. jQuery EasyUI 1.0.5...

    jQuery EasyUI 扩展(tip和form)

    在"jQuery EasyUI 扩展(tip和form)"这个主题中,我们将深入探讨如何利用 EasyUI 的扩展功能来优化提示(tip)和表单(form)的交互体验。 首先,让我们谈谈“Tip”。在 Web 开发中,提示信息通常用于向用户提供即时...

    jquery easyui 模板

    **jQuery EasyUI 模板详解** jQuery EasyUI 是一个基于 jQuery 的前端开发框架,它提供了一系列的 UI 组件,...通过深入研究和实践,你将能够熟练掌握使用 jQuery EasyUI 创建现代、高效的 Web 应用程序的方法和技巧。

    jQuery EasyUI 中文文档

    ### jQuery EasyUI 中文文档知识点概述 #### 一、jQuery EasyUI 概述 jQuery EasyUI 是一个基于 jQuery 的简化用户界面插件集合。它提供了一系列丰富的用户界面组件,可以帮助开发者快速构建美观且功能强大的 Web ...

    JQueryEasyUI的增删查改

    除了这些基础操作,JQuery EasyUI还提供了丰富的组件和事件,如`form`用于表单提交,`dialog`用于弹窗交互,以及`validatebox`进行表单验证等,这些都极大地简化了CRUD操作的实现。在实际项目中,开发者需要结合后台...

    Jqueryeasyui文档

    这个文档集合包含了丰富的 jQuery 相关方法和 EasyUI 的组件使用指南,是开发过程中不可或缺的参考资料。 一、jQuery 基础 jQuery 是一个轻量级的 JavaScript 库,以其简洁的语法和强大的功能著称。在 jQuery ...

    jQuery EasyUI 1.3.1

    jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web...jQuery EasyUI为我们提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,tree,validatebox,window等等。

    jQuery EasyUI 1.4.5 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    jQuery EasyUI 1.4.5版本更新内容: Bug(修复) datagrid:修复在调用updateRow方法之后使用getChanges方法无法返回被更新的行的BUG; treegrid:修复在追加或插入新行的时候触发onLoadSuccess事件的BUG; tree...

    jQuery EasyUI 1.2 API文档

    7. **插件扩展**:jQuery EasyUI 允许开发者自定义插件,扩展其功能。 8. **主题支持**:内置多套主题,可以方便地更改界面样式。 9. **事件处理**:每个组件都有一系列的事件,如onLoad、onClick等,允许开发者...

Global site tag (gtag.js) - Google Analytics