`
andy222241
  • 浏览: 6193 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

给jquery的validate插件增加自定义方法

阅读更多
jquery的validate插件的确挺好用,唯一一点不好的就是它自带的验证规则太少了,项目中经常需要用到的 文件后缀判断(例如相片上传的时候),中文字符判断,邮编验证,电话验证,手机号码验证等,都没有,去官网看了看,e文太差,没看明白,搜了搜,实验了一下,还挺好用,所以记下来,备着防止以后用,

验证中的js规则都属于网上收集的,非本人原创,不用找我来要版权什么的,


//ip验证
jQuery.validator.addMethod("ip", function(value, element) {      
    return this.optional(element) || (/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));      
  }, "Please enter a valid ip address.");      

// 增加只能是字母和数字的验证      
  jQuery.validator.addMethod("chrnum", function(value, element) {      
    return this.optional(element) || (/^([a-zA-Z0-9]+)$/.test(value));      
  }, "只能输入数字、字母或者它们的组合");      
  
// 自定义验证规则——对电话号码进行验证    
$.validator.addMethod("phone",function(value, element){         
   // “/\(?0\d{2,3}[) -]?\d{7,8}/”匹配电话号码的格式多种:010-82839278、(010)82839278、01082839278等,但是,这样有一个问题      
   // 如:(01082839278这样的也会匹配。当然可以用分支条件"|"解决,比较麻烦。而且以什么开始或结束也没有匹配。      
   // 为了简单起见,去掉有"()"的形式。匹配区号3位,则本地号8位,区号4位,则本地号7位的号码。      
   var tel = /^0\d{2}[-]?\d{8}$|^0\d{3}[-]?\d{7}$/;      
   return this.optional(element) || (tel.test(value));      
   }, "电话号码格式不对." );     

// 手机号码验证    
jQuery.validator.addMethod("mobile", function(value, element) {    
  var length = value.length;    
  //长度为11,以13,15,18开头的
  return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));    
}, "手机号码格式不对");    
  
// 邮政编码验证    
jQuery.validator.addMethod("zip", function(value, element) {    
  var tel = /^[0-9]{6}$/;    
  return this.optional(element) || (tel.test(value));    
}, "邮政编码格式不对"); 

//图片格式(后缀)
jQuery.validator.addMethod("photo", function(value, element) {
	//后缀jpg,gif,bmp,jpeg,允许大小写混合后缀
  var fileName =/^(([a-zA-Z]:)|(\\))((\\)[^\\\*\?\|/:<>]{1,255})+\.(([j,J][p,P][g,G])|([g,G][i,I][f,F]|([b,B][m,M][p,P])|([j,J][p,P][e,E][g,G])))$/; 
  return this.optional(element) || (fileName.test(value));    
}, "只允许后缀为.jpg,.bmp,.gif,jpeg的文件");



把这个单独写到一个js里,在页面引用就可以用了,例如
 	<td ><input type="file" name="photo"  class="{photo:true}"></td>

<input type="text" name="apply.abroadPhone" value="${(apply.abroadPhone)?if_exists}"  class="{phone:true}"/>


如果要使用国际化验证消息则在messages_cn.js里添加对应的国际化信息即可
例如
phone:"请填写正确的电话号码",
ip:"asdflkj;lkj",
…………



注意:引用自定义js的时候,如果要让国际化信息生效,则messages_cn.js要在自定义的js之后引入。
分享到:
评论

相关推荐

    jquery validate 验证自定义样式

    总之,jQuery Validate插件提供了一个强大且灵活的框架,用于创建自定义验证样式。通过理解其内部机制并结合CSS和JavaScript,你可以为你的Web应用构建出符合品牌风格和用户体验的验证功能。在实践中不断探索和优化...

    jQuery Validate插件验证表单小练

    总结起来,jQuery Validate插件提供了一套强大且灵活的前端表单验证解决方案,通过其内置的验证规则、自定义消息和事件处理,你可以轻松创建用户友好且功能完善的表单。在实际项目中,结合良好的设计原则和用户体验...

    jQuery validate 自定义样式、规则

    3. **使用错误消息插件**:jQuery Validate 提供了`errorPlacement`选项,允许你自定义错误消息的位置。可以将其设置为一个回调函数,以决定错误消息插入到HTML中的位置。 4. **隐藏验证提示**:使用`showErrors`...

    JQuery Validate插件的验证规则和例子,合成AJAX

    jQuery Validate插件是用于在客户端进行表单验证的强大工具,它提供了丰富的验证规则和自定义方法,使得用户在提交表单前可以即时检测输入数据的有效性,大大提升了用户体验。该插件是jQuery库的一个扩展,通过简单...

    jquery validate表单验证插件制作注册表单提交验证

    在本文中,我们将深入探讨如何使用jQuery Validate插件来创建一个功能完备的注册表单,进行数据提交前的验证。jQuery Validate是一个强大的JavaScript库,它为HTML表单提供了灵活且易于使用的验证规则,确保用户输入...

    jQuery插件Validate实现自定义表单验证

    在本文中,我们将深入探讨如何使用jQuery Validate插件实现自定义表单验证,特别是如何自定义一个验证方法。 首先,要使用jQuery Validate插件,你需要在页面中引入jQuery库以及jQuery Validate插件的JavaScript...

    jQuery Validate插件实现表单验证

    jQuery Validate插件是一个非常流行的JavaScript库,它在客户端实现表单验证方面提供了广泛的功能。通过利用这个插件,开发者可以轻松地在用户的浏览器端对表单数据进行检查,以确保输入的数据符合特定的格式和规则...

    Jquery validate和form插件

    **jQuery validate 和 form 插件详解** 在网页开发中,用户界面的交互性和数据验证是不可或缺的部分。jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理和动画效果。`jQuery validate` 和 `...

    jquery validate 信息气泡提示

    在网页开发中,jQuery Validate 是一个非常常用的验证插件,用于对用户输入的数据进行校验,确保数据的有效性和完整性。这个插件可以帮助开发者创建复杂的表单验证规则,提高用户体验,减少服务器端的压力。结合 ...

    jQueryValidate.rar

    《jQuery Validate插件详解及其应用》 在Web开发中,表单验证是不可或缺的一部分,它确保用户输入的数据符合预设的规则,提高了用户体验并减少了服务器端的负担。jQuery Validate插件是实现这一功能的强大工具,它...

    jquery validate例子

    《jQuery Validate插件详解与实例应用》 在Web开发中,表单验证是不可或缺的一环,它能够确保用户输入的数据符合预设的规则,提高数据的准确性和安全性。jQuery Validate是一个强大的JavaScript库,专为jQuery设计...

    jQuery Validate表单验证插件

    jQuery Validate插件是jQuery库的一个扩展,由Jörn Zaefferer开发。它的主要目标是提供一种简单、直观的方式来验证HTML表单中的输入,避免无效数据发送到服务器。通过使用此插件,开发者可以自定义验证规则,添加...

    jQuery的validate插件使用整理

    基于jQuery库,validate插件提供了丰富的功能,包括内置的验证规则、自定义验证方法、错误消息处理以及国际化支持。下面将详细阐述validate插件的使用方法和核心特性。 ### 1. 安装与引入 首先,你需要在项目中...

    Jquery.validate插件使用方法

    1. **引入资源**:在项目中,首先需要引入jQuery库和jQuery.validate插件的js文件,通常包括`jquery.js`、`jquery.validate.js`以及可选的`additional-methods.js`(包含了一些额外的验证方法)。 2. **初始化验证*...

    jquery的validate方法运用

    除了内置的验证规则,jQuery Validate插件还允许我们自定义验证方法。假设我们要验证电话号码,可以这样做: ```javascript $.validator.addMethod("customPhoneNumber", function(value, element) { return /^\d{...

    jQuery Validate 1.1.2

    6. **插件扩展**:jQuery Validate 插件具有良好的可扩展性,可以通过编写自定义方法来扩展验证规则。 在jQuery Validate 1.1.2版本中,可能包含以下更新: - **修复已知bug**:此版本可能会修复了前一版本中报告...

    Jquery插件,JqueryUI,JqueryForm,JqueryValidate,Jqueryvsdoc

    在这个压缩包中,我们重点探讨的是几个基于 jQuery 的核心插件,它们分别是:jQuery UI、jQuery Form、jQuery Validate 和 jQuery vsdoc。 1. **jQuery UI** jQuery UI 是一个扩展了 jQuery 功能的开源库,提供了...

    jquery validate 验证手册

    而jQuery Validate插件则是jQuery生态系统中的重要组成部分,专门用于表单验证。它提供了多种内置验证规则,如必填项、邮箱格式、数字范围等,并且可以自定义规则以满足各种复杂的验证需求。 jQuery Validate插件的...

    jquery validate默认错误提示显示位置修改

    jQuery Validate插件是实现表单验证功能的一个强大工具,它提供了丰富的验证规则和自定义选项。然而,默认情况下,jQuery Validate插示错误提示的位置可能并不符合所有项目的需求。本文将详细介绍如何修改jQuery ...

    jquery validate 表单验证

    jQuery Validate插件是jQuery库的一个扩展,专门用于实现这样的功能。这个插件提供了一种简便的方式来对HTML表单进行验证,避免了服务器端不必要的负载。接下来,我们将深入探讨jQuery Validate的使用方法、核心概念...

Global site tag (gtag.js) - Google Analytics