还没有任何记录...
jquery.validate.js使用之自定义表单验证规则
来源：懒人建站
作者： jquery.validate
jquery.validate.js使用之自定义表单验证规则，下面列出了一些常用的验证法规则，//邮箱 表单验证规则/电话号码验证/邮政编码验证
jquery.validate.js使用之自定义表单验证规则，下面列出了一些常用的验证法规则
jquery.validate.js演示查看
/js/jquery/jquery_validate/
========================================================
//扩展验证规则
//邮箱 表单验证规则
jQuery.validator.addMethod("mail", function (value, element) {
var mail = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$/;
return this.optional(element) || (mail.test(value));
}, "邮箱格式不对");
//电话验证规则
jQuery.validator.addMethod("phone", function (value, element) {
var phone = /^0\d{2,3}-\d{7,8}$/;
return this.optional(element) || (phone.test(value));
}, "电话格式如：7");
//区号验证规则
jQuery.validator.addMethod("ac", function (value, element) {
var ac = /^0\d{2,3}$/;
return this.optional(element) || (ac.test(value));
}, "区号如：010或0371");
//无区号电话验证规则
jQuery.validator.addMethod("noactel", function (value, element) {
var noactel = /^\d{7,8}$/;
return this.optional(element) || (noactel.test(value));
}, "电话格式如：");
//手机验证规则
jQuery.validator.addMethod("mobile", function (value, element) {
var mobile = /^1[3|4|5|7|8]\d{9}$/;
return this.optional(element) || (mobile.test(value));
}, "手机格式不对");
//邮箱或手机验证规则
jQuery.validator.addMethod("mm", function (value, element) {
var mm = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/;
return this.optional(element) || (mm.test(value));
}, "格式不对");
//电话或手机验证规则
jQuery.validator.addMethod("tm", function (value, element) {
var tm=/(^1[3|4|5|7|8]\d{9}$)|(^\d{3,4}-\d{7,8}$)|(^\d{7,8}$)|(^\d{3,4}-\d{7,8}-\d{1,4}$)|(^\d{7,8}-\d{1,4}$)/;
return this.optional(element) || (tm.test(value));
}, "格式不对");
//年龄 表单验证规则
jQuery.validator.addMethod("age", function(value, element) {
var age = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/;
return this.optional(element) || (age.test(value));
}, "不能超过120岁");
///// 20-60
/^([2-5]\d)|60$/
jQuery.validator.addMethod("fax",function(value,element){
var fax = /^(\d{3,4})?[-]?\d{7,8}$/;
return this.optional(element) || (fax.test(value));
},"传真格式如：7");
//验证当前值和目标val的值相等 相等返回为 false
jQuery.validator.addMethod("equalTo2",function(value, element){
var returnVal =
var id = $(element).attr("data-rule-equalto2");
var targetVal = $(id).val();
if(value === targetVal){
returnVal =
return returnV
},"不能和原始密码相同");
//大于指定数
jQuery.validator.addMethod("gt",function(value, element){
var returnVal =
var gt = $(element).data("gt");
if(value > gt && value != ""){
returnVal =
return returnV
},"不能小于0 或空");
jQuery.validator.addMethod("chinese", function (value, element) {
var chinese = /^[\u4E00-\u9FFF]+$/;
return this.optional(element) || (chinese.test(value));
}, "格式不对");
//指定数字的整数倍
jQuery.validator.addMethod("times", function (value, element) {
var returnVal =
var base=$(element).attr('data-rule-times');
if(value%base!=0){
returnVal=
return returnV
}, "必须是发布赏金的整数倍");
jQuery.validator.addMethod("idCard", function (value, element) {
var isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;//(15位)
var isIDCard2=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;//(18位)
return this.optional(element) || (isIDCard1.test(value)) || (isIDCard2.test(value));
}, "格式不对");
// 字符验证
jQuery.validator.addMethod("stringCheck", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "只能包括中文字、英文字母、数字和下划线");
------------------------------------------------------------
// 中文字两个字节
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
var length = value.
for(var i = 0; i < value. i++){
if(value.charCodeAt(i) > 127){
return this.optional(element) || ( length >= param[0] && length <= param[1] );
}, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");
------------------------------------------------------------
// 身份证号码验证
jQuery.validator.addMethod("isIdCardNo", function(value, element) {
return this.optional(element) || isIdCardNo(value);
}, "请正确输入您的身份证号码");
------------------------------------------------------------
// 手机号码验证
jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.
var mobile =/^[1][3-8]+\\d{9}/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "请正确填写您的手机号码");
------------------------------------------------------------
// 电话号码验证
jQuery.validator.addMethod("isTel", function(value, element) {
var tel = /^\d{3,4}-?\d{7,9}$/;
//电话号码格式010-
return this.optional(element) || (tel.test(value));
}, "请正确填写您的电话号码");
------------------------------------------------------------
// 联系电话(手机/电话皆可)验证
jQuery.validator.addMethod("isPhone", function(value,element) {
var length = value.
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
var tel = /^\d{3,4}-?\d{7,9}$/;
return this.optional(element) || (tel.test(value) || mobile.test(value));
}, "请正确填写您的联系电话");
------------------------------------------------------------
// 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");
jquery.validate.js表单验证规则，整理，不断更新中...
jquery.validate.js使用之自定义表单验证规则，下面列出了一些常用的验证法规则
jquery.validate.js演示查看
/js/jquery/jquery_validate/
========================================================
//扩展验证规则
//邮箱 表单验证规则
jQuery.validator.addMethod(&mail&, function (value, element) {
var mail = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$/;
return this.optional(element) || (mail.test(value));
}, &邮箱格式不对&);
//电话验证规则
jQuery.validator.addMethod(&phone&, function (value, element) {
var phone = /^0\d{2,3}-\d{7,8}$/;
return this.optional(element) || (phone.test(value));
}, &电话格式如：7&);
//区号验证规则
jQuery.validator.addMethod(&ac&, function (value, element) {
var ac = /^0\d{2,3}$/;
return this.optional(element) || (ac.test(value));
}, &区号如：010或0371&);
//无区号电话验证规则
jQuery.validator.addMethod(&noactel&, function (value, element) {
var noactel = /^\d{7,8}$/;
return this.optional(element) || (noactel.test(value));
}, &电话格式如：&);
//手机验证规则
jQuery.validator.addMethod(&mobile&, function (value, element) {
var mobile = /^1[3|4|5|7|8]\d{9}$/;
return this.optional(element) || (mobile.test(value));
}, &手机格式不对&);
//邮箱或手机验证规则
jQuery.validator.addMethod(&mm&, function (value, element) {
var mm = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/;
return this.optional(element) || (mm.test(value));
}, &格式不对&);
//电话或手机验证规则
jQuery.validator.addMethod(&tm&, function (value, element) {
var tm=/(^1[3|4|5|7|8]\d{9}$)|(^\d{3,4}-\d{7,8}$)|(^\d{7,8}$)|(^\d{3,4}-\d{7,8}-\d{1,4}$)|(^\d{7,8}-\d{1,4}$)/;
return this.optional(element) || (tm.test(value));
}, &格式不对&);
//年龄 表单验证规则
jQuery.validator.addMethod(&age&, function(value, element) {
var age = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/;
return this.optional(element) || (age.test(value));
}, &不能超过120岁&);
///// 20-60
/^([2-5]\d)|60$/
jQuery.validator.addMethod(&fax&,function(value,element){
var fax = /^(\d{3,4})?[-]?\d{7,8}$/;
return this.optional(element) || (fax.test(value));
},&传真格式如：7&);
//验证当前值和目标val的值相等 相等返回为 false
jQuery.validator.addMethod(&equalTo2&,function(value, element){
var returnVal =
var id = $(element).attr(&data-rule-equalto2&);
var targetVal = $(id).val();
if(value === targetVal){
returnVal =
return returnV
},&不能和原始密码相同&);
//大于指定数
jQuery.validator.addMethod(>&,function(value, element){
var returnVal =
var gt = $(element).data(>&);
if(value & gt && value != &&){
returnVal =
return returnV
},&不能小于0 或空&);
jQuery.validator.addMethod(&chinese&, function (value, element) {
var chinese = /^[\u4E00-\u9FFF]+$/;
return this.optional(element) || (chinese.test(value));
}, &格式不对&);
//指定数字的整数倍
jQuery.validator.addMethod(×&, function (value, element) {
var returnVal =
var base=$(element).attr('data-rule-times');
if(value%base!=0){
returnVal=
return returnV
}, &必须是发布赏金的整数倍&);
jQuery.validator.addMethod(&idCard&, function (value, element) {
var isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;//(15位)
var isIDCard2=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;//(18位)
return this.optional(element) || (isIDCard1.test(value)) || (isIDCard2.test(value));
}, &格式不对&);
// 字符验证
jQuery.validator.addMethod(&stringCheck&, function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, &只能包括中文字、英文字母、数字和下划线&);
------------------------------------------------------------
// 中文字两个字节
jQuery.validator.addMethod(&byteRangeLength&, function(value, element, param) {
var length = value.
for(var i = 0; i & value. i++){
if(value.charCodeAt(i) & 127){
return this.optional(element) || ( length &= param[0] && length &= param[1] );
}, &请确保输入的值在3-15个字节之间(一个中文字算2个字节)&);
------------------------------------------------------------
// 身份证号码验证
jQuery.validator.addMethod(&isIdCardNo&, function(value, element) {
return this.optional(element) || isIdCardNo(value);
}, &请正确输入您的身份证号码&);
------------------------------------------------------------
// 手机号码验证
jQuery.validator.addMethod(&isMobile&, function(value, element) {
var length = value.
var mobile =/^[1][3-8]+\\d{9}/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, &请正确填写您的手机号码&);
------------------------------------------------------------
// 电话号码验证
jQuery.validator.addMethod(&isTel&, function(value, element) {
var tel = /^\d{3,4}-?\d{7,9}$/;
//电话号码格式010-
return this.optional(element) || (tel.test(value));
}, &请正确填写您的电话号码&);
------------------------------------------------------------
// 联系电话(手机/电话皆可)验证
jQuery.validator.addMethod(&isPhone&, function(value,element) {
var length = value.
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
var tel = /^\d{3,4}-?\d{7,9}$/;
return this.optional(element) || (tel.test(value) || mobile.test(value));
}, &请正确填写您的联系电话&);
------------------------------------------------------------
// 邮政编码验证
jQuery.validator.addMethod(&isZipCode&, function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, &请正确填写您的邮政编码&);
jquery.validate.js表单验证规则，整理，不断更新中...
本文链接：/js/jquery/808.html
(责任编辑：懒人建站)
jquery.validate.js使用之自定义表单验证规则由懒人建站收集整理，您可以自由传播，请主动带上本文链接
就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。
jquery.validate.js使用之自定义表单验证规则-相关文章
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
交流交流好啊！博主真厉害JS 插件 | Amaze UI
JS 插件Amaze UI JS 插件，使用注意事项，以及 JS 插件介绍。 目录JavaScript 基本使用 基于 jQuery 从 2.0 开始，Amaze UI JavaScript 组件转向基于
开发，使用时确保在 Amaze UI 的脚本之前引入了 jQuery 最新正式版。组件调用 组件的调用方式普通 jQuery 插件一样，具体细节请查看各个组件的文档。jQuery 和 Zepto.js 的一些差异 jQuery 和 Zepto.js 表面看起来差不多，其实一些细节上差异很大，同时支持 jQuery 和 Zepto.js 是一件吃力不讨好的事情，这应该也是
的一个原因。（）width()/height() Zepto.js: 由盒模型（box-sizing）决定jQuery: 忽略盒模型，始终返回内容区域的宽/高（不包含 padding、border）jQuery ：Note that .width() will always return the content width, regardless of the value of the CSS box-sizing property. As of jQuery 1.8, this may require retrieving the CSS width plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box. To avoid this penalty, use .css(&width&) rather than .width().解决方式就是在 jQuery 中使用 .css('width')，而不是 .width()。这点上 jQuery 的处理方式是值得商榷的，比如下面的例子，$('.box').css('height') 仍然返回 20px，这不是扯蛋么：&
box-sizing: border-
padding: 10px;
height: 0;
class="box"&&边框三角形宽高的获取 假设用下面的 HTML 和 CSS 画了一个小三角形： class="caret"&&.caret {
height: 0;
border-width: 0 20px 20px;
border-color: transpar
border-style:
}jQuery 使用 .width() 和 .css('width') 都返回 0，高度也一样；Zepto 使用 .width() 返回 40，使用 .css('width') 返回 0px。所以，这种场景，jQuery 使用 .outerWidth()/.outerHeight()；Zepto 使用 .width()/.height()。offset() Zepto.js: 返回 top、left、width、heightjQuery: 返回 width、height$(htmlString, attributes) )DOM 操作区别 $(function() {
var $list = $('&ul&&li&jQuery 插入&/li&&/ul&', {
id: 'insert-by-jquery'
$list.appendTo($('body'));
});jQuery 操作 ul 上的 id 不会被添加；Zepto 可以在 ul 上添加 id。事件触发区别 $script = $('&script /&', {
src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.min.js',
id: 'ui-jquery'
$script.appendTo($('body'));
$script.on('load', function() {
console.log('jQ script loaded');
});使用 jQuery 时 load 事件的处理函数不会执行；使用 Zepto 时 load 事件的处理函数会执行。其他参考链接：高级使用 默认初始化事件接口 Amaze UI 通过特定的 HTML 来绑定事件，多数 JS 组件通过 HTML 标记就可以实现调用。默认的初始化事件都在 xx.amui.data-api 命名空间下，用户可以自行关闭。关闭所有默认事件：$(document).off('.data-api');关闭特定组件的默认事件：$(document).off('.modal.amui.data-api');自定义事件 一些组件提供了自定义事件，命名的方式为 {事件名称}.{组件名称}.amui，用户可以查看组件文档了解、使用这些事件。$('#myAlert').on('close.alert.amui', function() {
});MutationObserver 双向数据绑定很酷？ 才是（或即将成为）幕后的英雄。Amaze UI 2.1 中实验性地引入了 MutationObserver，请谨慎使用。data-am-observe 在元素上添加 data-am-observe 属性以后，动态插入该元素的 Amaze UI JS 插件会自动初始化（）， 支持的插件包括 Button、Dropdown、Slider、Popover、ScrollSpy、Tabs。$().DOMObserve(options, callback) options: 监视的属性（），默认为 {childList: true, subtree: true}；callback(mutations, observer): DOM 发生变化时的处理函数，第一个参数为存储
对象的数组，第二个参数为 MutationObserver 实例本身。插入 p 元素 添加 Class 移除 p 元素DOM 变化监视演示，打开控制台查看 log id="js-do-actions"&
class="am-btn am-btn-primary" data-insert&插入 p 元素&
class="am-btn am-btn-secondary" data-addClass&添加 Class&
class="am-btn am-btn-warning" data-remove&移除 p 元素&
id="js-do-demo"&
&DOM 变化监视演示，打开控制台查看 log&
$(function() {
var $wrapper = $('#js-do-demo');
$wrapper.DOMObserve({
childList: true,
attributes: true,
subtree: true
}, function(mutations, observer) {
console.log(observer.constructor === window.MutationObserver);
console.log('#js-do-demo 的 DOM 发生变化鸟：' + mutations[0].type);
$('#js-do-actions').find('button').on('click', function(e) {
var $t = $(e.target);
if ($t.is('[data-insert]')) {
$wrapper.append('&p&插入了一个 p&/p&');
} else if($t.is('[data-remove]')) {
$wrapper.find('p').last().remove();
$wrapper.addClass('am-text-danger');
&参考链接：；模块化开发 关于前端模块化，Amaze UI 1.0 的时候曾做过一个，截止
共 1869 个投票：CMD - Sea.js 23.86% (446 votes)AMD - RequireJS 24.51% (458 votes)CommonJS - Browserify 9.58% (179 votes)其他加载工具（或者自行开发的） 8.19% (153 votes)什么是 JS 模块化？可以吃吗？ 34% (633 votes)CMDAMDCJSotherunknown显然，模块化是必然趋势， 将原生支持模块化。Amaze UI 2.0 按照
规范来组织模块（前端也像 Node.js 一样编写模块）。最终如何打包，用户可以自行选择。：结合 NPM，实现前端模块管理。很多前端模块都已经发布到 NPM，可以抛弃 Bower 这类功能很单一的工具了；：除管理本地模块以外，还可以从 GitHub 上直接获取开源项目，支持 Javascript、HTML、CSS；：把按照 CJS 编写的模块打包成 AMD 模块;。 貌似不支持直接通过源码提取依赖，使用 Sea.js 的用户可能需要自行修改打包工具。建议阅读的文章：在微信上关注我们缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
文章目录[隐藏]
这个 jQuery 插件，是用来缓冲加载图片的插件。如果一篇文章很长有很多图片的话，下载图片就需要很多时间。而这款插件，会检测你的滚动情况，只有你要看到那个图片的时候，它才会从后台请求下载图片，然后显示出来。使用这个插件，可以在需要显示图片的时候，才下载图片，所以可以减少服务器的压力，避免不必要的资源下载。如果一个人不看下面的图片，那加载下面的图片就是一种浪费。
Lazy Load 插件原理
修改目标 img 的 src 属性为 orginal 属性，从而中断图片的加载。检测滚动状态，然后把可视网页中的 img 的 src 属性还原加载图片，制造缓冲加载的效果。
但是现在，很多javascript大牛分析得出，这个插件其实并没有真正的缓加载效果。确实是这样，官方也已经给出了说明和解决方法了。
问题原因：在新版的浏览器中，即使你删除了 Javascript 控制的 src 属性，浏览器仍然会去加载这个图像。
解决方法：直接修改 HTML 的结构，在 img 标签中添加新的属性，把 src 属性的值指向占位图片，添加 data-original 属性，让其指向真正的图像地址。
例如：&img data-original=“img/example.jpg” src=“img/grey.gif”&
这样我们就需要先分析一下插件的优缺点，再决定是否要使用。
必须按照这种结构才有实际作用，需要对输出进行定义。
可以节约服务器资源，并且有较好的用户体验。
如果图片很大，当用户滚动到目标位置，需要较长时间下载。
增加服务器压力，浪费系统资源。
究竟使用不使用，还是要看你自己的实际需求。如果你图片比较少，就不必使用了，如果你图片比较多，可以考虑一下。但是，使用的话，你可能需要把每一 个img 标签上自己加上这个属性，会稍微麻烦一点。潜行者m博客上，就用了这个插件，不过没用使用官方说的那种结构，要的只是一个缓冲加载的效果。
开始使用 lazyload.js
第一步：加载相关文件。
很明显，你要加载jquery和这个插件。你可以使用以下代码，加载这几个文件：
&script src="jquery.js" type="text/javascript"&&/script&
&script src="jquery.lazyload.js" type="text/javascript"&&/script&
第二步：定义图片结构。
按照官方的建议，定义你的img结构：
&img src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480"&
第三步：触发这个插件，生效。
激活以下，你就可以在目标中使用了。
$("img.lazy").lazyload();
lazyload.js 高级使用方法：
下面部分来自官方文档，将官方文档进行了一下简单的翻译。
更周全的做法
我们不得不思考这样一个问题。我们定义了这样一个结构，那么网页中，就不会加载源图像了。只有当 Javascript 执行，才会显示这个源图像。如果用户的浏览器不支持或者用户关掉了支持 Javascript 的选项，那么我们的这个图像就无法显示出来。也就是说，如果没有 Javascript 的支持，我们的图像就无法显示出来。
应对这个问题，我们需要引入 noscript 标签。大体思路如下：用 noscript 包含真实的图像位置，当浏览器不支持 Javascript，直接显示图像。对现有图像，隐藏处理，使用 show() 方法触发显示。这样，如果浏览器不支持 Javascript，我们自定义的 img 就不会出现，而显示 noscript 里面的图像。具体实现代码如下：
&img src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480"&
&noscript&&img src="img/example.jpg" width="640" heigh="480"&&/noscript&
&script type="text/javascript"&&/script&$("img.lazy").show().lazyload();&/script&
默认的情况是，当你滚动到图片位置的时候，插件开始加载。这样，用户可能首先看到的是一个空白图像，然后再缓慢出现。如果你想在用户滚动之前，提前加载这个图像，你可以配置一下参数。
$("img.lazy").lazyload({ threshold : 200 });
threshold 这个参数，就是用来提前加载的。上面这个语句的意思是，当距离图片还有200像素的时候，就开始加载图片。
自定义触发事件
默认的触发事件，是滚动，当你滚动的时候，就会检查然后加载。你可以使用event属性，设置你自己的加载事件，之后你可以自定义触发这个事件的条件，然后去加载图像。
$("img.lazy").lazyload({ event : "click" });
自定义显示效果
默认的图片实现效果，就是没有效果，下载完成之后，直接显示出来。这样的用户体验并不好，你可以设置 effect 属性，来控制显示图片的效果。例如
$("img.lazy").lazyload({ effect : "fadeIn" });
fadeIn的效果就是，改变图片的透明度，渐现的方式出现。效果：
把图像插入某个容器
大家如果使用智能手机的话，经常去应用网站下载应用，他们通常使用一个横着的容器，放一些手机截图。使用 container 属性，能很轻松在容器中实现缓冲加载。首先，我们需要用css定义这个容器，然后用这个插件进行加载。效果：
#container { height: 600 overflow: }
$("img.lazy").lazyload({
container: $("#container")
加载不可见图像
有部分图像是不可见的，我们对其加上类似 display：none 等属性的图像。默认的情况下，这个插件是不会加载隐藏的不可见图像。如果我们需要用它加载不可见图像，我们需要将 skip_invisible 设置为 false
$("img.lazy").lazyload({ skip_invisible : false });
&我爱水煮鱼，如果本文对你有帮助，你可以扫描右边的二维码打赏：
你可能也喜欢
& Copyright 2016
，页面生成时间：0.000598秒。
Icons by .
Powered by .
Hosting by .
