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插件提供了一个强大且灵活的框架,用于创建自定义验证样式。通过理解其内部机制并结合CSS和JavaScript,你可以为你的Web应用构建出符合品牌风格和用户体验的验证功能。在实践中不断探索和优化...
总结起来,jQuery Validate插件提供了一套强大且灵活的前端表单验证解决方案,通过其内置的验证规则、自定义消息和事件处理,你可以轻松创建用户友好且功能完善的表单。在实际项目中,结合良好的设计原则和用户体验...
3. **使用错误消息插件**:jQuery Validate 提供了`errorPlacement`选项,允许你自定义错误消息的位置。可以将其设置为一个回调函数,以决定错误消息插入到HTML中的位置。 4. **隐藏验证提示**:使用`showErrors`...
jQuery Validate插件是用于在客户端进行表单验证的强大工具,它提供了丰富的验证规则和自定义方法,使得用户在提交表单前可以即时检测输入数据的有效性,大大提升了用户体验。该插件是jQuery库的一个扩展,通过简单...
在本文中,我们将深入探讨如何使用jQuery Validate插件来创建一个功能完备的注册表单,进行数据提交前的验证。jQuery Validate是一个强大的JavaScript库,它为HTML表单提供了灵活且易于使用的验证规则,确保用户输入...
在本文中,我们将深入探讨如何使用jQuery Validate插件实现自定义表单验证,特别是如何自定义一个验证方法。 首先,要使用jQuery Validate插件,你需要在页面中引入jQuery库以及jQuery Validate插件的JavaScript...
jQuery Validate插件是一个非常流行的JavaScript库,它在客户端实现表单验证方面提供了广泛的功能。通过利用这个插件,开发者可以轻松地在用户的浏览器端对表单数据进行检查,以确保输入的数据符合特定的格式和规则...
**jQuery validate 和 form 插件详解** 在网页开发中,用户界面的交互性和数据验证是不可或缺的部分。jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理和动画效果。`jQuery validate` 和 `...
在网页开发中,jQuery Validate 是一个非常常用的验证插件,用于对用户输入的数据进行校验,确保数据的有效性和完整性。这个插件可以帮助开发者创建复杂的表单验证规则,提高用户体验,减少服务器端的压力。结合 ...
《jQuery Validate插件详解及其应用》 在Web开发中,表单验证是不可或缺的一部分,它确保用户输入的数据符合预设的规则,提高了用户体验并减少了服务器端的负担。jQuery Validate插件是实现这一功能的强大工具,它...
《jQuery Validate插件详解与实例应用》 在Web开发中,表单验证是不可或缺的一环,它能够确保用户输入的数据符合预设的规则,提高数据的准确性和安全性。jQuery Validate是一个强大的JavaScript库,专为jQuery设计...
jQuery Validate插件是jQuery库的一个扩展,由Jörn Zaefferer开发。它的主要目标是提供一种简单、直观的方式来验证HTML表单中的输入,避免无效数据发送到服务器。通过使用此插件,开发者可以自定义验证规则,添加...
基于jQuery库,validate插件提供了丰富的功能,包括内置的验证规则、自定义验证方法、错误消息处理以及国际化支持。下面将详细阐述validate插件的使用方法和核心特性。 ### 1. 安装与引入 首先,你需要在项目中...
1. **引入资源**:在项目中,首先需要引入jQuery库和jQuery.validate插件的js文件,通常包括`jquery.js`、`jquery.validate.js`以及可选的`additional-methods.js`(包含了一些额外的验证方法)。 2. **初始化验证*...
除了内置的验证规则,jQuery Validate插件还允许我们自定义验证方法。假设我们要验证电话号码,可以这样做: ```javascript $.validator.addMethod("customPhoneNumber", function(value, element) { return /^\d{...
6. **插件扩展**:jQuery Validate 插件具有良好的可扩展性,可以通过编写自定义方法来扩展验证规则。 在jQuery Validate 1.1.2版本中,可能包含以下更新: - **修复已知bug**:此版本可能会修复了前一版本中报告...
在这个压缩包中,我们重点探讨的是几个基于 jQuery 的核心插件,它们分别是:jQuery UI、jQuery Form、jQuery Validate 和 jQuery vsdoc。 1. **jQuery UI** jQuery UI 是一个扩展了 jQuery 功能的开源库,提供了...
而jQuery Validate插件则是jQuery生态系统中的重要组成部分,专门用于表单验证。它提供了多种内置验证规则,如必填项、邮箱格式、数字范围等,并且可以自定义规则以满足各种复杂的验证需求。 jQuery Validate插件的...
jQuery Validate插件是实现表单验证功能的一个强大工具,它提供了丰富的验证规则和自定义选项。然而,默认情况下,jQuery Validate插示错误提示的位置可能并不符合所有项目的需求。本文将详细介绍如何修改jQuery ...
jQuery Validate插件是jQuery库的一个扩展,专门用于实现这样的功能。这个插件提供了一种简便的方式来对HTML表单进行验证,避免了服务器端不必要的负载。接下来,我们将深入探讨jQuery Validate的使用方法、核心概念...