从前面的示例中不难看出validate中自带的验证方法足以满足一般的要求,对于特别的要求可以使用addMethod(name,method,message)添加自定义的验证规则,下面的示例中添加了一个用于正则表达式验证的扩展验证的方法,示例如下:


<script type="text/javascript">
        jQuery.validator.addMethod("regex",  //addMethod第1个参数:方法名称
        function(value, element, params) {     //addMethod第2个参数:验证方法,参数(被验证元素的值,被验证元素,参数)
            var exp = new RegExp(params);     //实例化正则对象,参数为传入的正则表达式
            return exp.test(value);                    //测试是否匹配
        },
        "格式错误");    //addMethod第3个参数:默认错误信息
        $(function() {
            $("#signupForm").validate(             {
            rules: {
                txtPassword1: "required",  //密码1必填                 txtPassword2: {    //密码2的描述多于1项使用对象类型
                    required: true,  //必填,这里可以是一个匿名方法
                    equalTo: "#txtPassword1",  //必须与密码1相等
                    rangelength: [5, 10],    //长度5-10之间
                    regex: "^\\w+$"          //使用自定义的验证规则,在上例中新增的部分
                },                 txtEmail: "email"   //电子邮箱必须合法
            },
            messages: {
                txtPassword1: "您必须填写",                 txtPassword2: {
                    required: "您必须填写",
                    equalTo: "密码不一致",
                    rangelength: "长度必须介于{0} 和 {1} 之间的字符串",
                    regex: "密码只能是数字、字母与下划线"
                }
            },
            debug: false,  //如果修改为true则表单不会提交
            submitHandler: function() {
                alert("开始提交了");
            }
        });
    });
    </script>

运行结果:

注意,如果参数有多个可以使用数组,如regex:[1,3,5],方法中可以使用下标访问:params[0]

网友提供的一些扩展验证方法:
// 手机号码验证
jQuery.validator.addMethod("mobile", function(value, element) {
    var length = value.length;
    var mobile =  /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/
    return this.optional(element) || (length == 11 && mobile.test(value));
}, "手机号码格式错误");

// 电话号码验证   
jQuery.validator.addMethod("phone", function(value, element) {
    var tel = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;
    return this.optional(element) || (tel.test(value));
}, "电话号码格式错误");

// 邮政编码验证   
jQuery.validator.addMethod("zipCode", function(value, element) {
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "邮政编码格式错误");

// QQ号码验证   
jQuery.validator.addMethod("qq", function(value, element) {
    var tel = /^[1-9]\d{4,9}$/;
    return this.optional(element) || (tel.test(value));
}, "qq号码格式错误");

// IP地址验证
jQuery.validator.addMethod("ip", function(value, element) {
    var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
    return this.optional(element) || (ip.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));
}, "Ip地址格式错误");

// 字母和数字的验证
jQuery.validator.addMethod("chrnum", function(value, element) {
    var chrnum = /^([a-zA-Z0-9]+)$/;
    return this.optional(element) || (chrnum.test(value));
}, "只能输入数字和字母(字符A-Z, a-z, 0-9)");

// 中文的验证
jQuery.validator.addMethod("chinese", function(value, element) {
    var chinese = /^[\u4e00-\u9fa5]+$/;
    return this.optional(element) || (chinese.test(value));
}, "只能输入中文");

// 下拉框验证
$.validator.addMethod("selectNone", function(value, element) {
    return value == "请选择";
}, "必须选择一项");

// 字节长度验证
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
    var length = value.length;
    for (var i = 0; i < value.length; i++) {
        if (value.charCodeAt(i) > 127) {
            length++;
        }
    }
    return this.optional(element) || (length >= param[0] && length <= param[1]);
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));

源码下载

JQuery扩展插件Validate—5添加自定义验证方法的更多相关文章

  1. jQuery form插件的使用--使用 fieldValue 方法校验表单

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  2. jQuery扩展插件以及正则相关函数练习

    一.jQuery扩展插件 二.相关正则函数:

  3. jQuery Validate自定义各种验证方法(转)

    一.封装自定义验证方法-validate-methods.js /***************************************************************** j ...

  4. Angular TypeScript开发环境集成jQuery扩展插件

    集成步骤: 1.安装jquery极其扩展插件库ts定义文件 npm install jquery --save npm install --save-dev @types/jquery npm ins ...

  5. jQuery扩展插件

    jQuery有多好用,大家有目共睹的,但是有时候不是每个功能都是万能的,有时候我们需要实现自己的功能,jQuery提供了很好的拓展功能,我们可以去拓展插件,更好的利用jQuery 查看官网,可知,有两 ...

  6. jquery 扩展插件方法

    分析插件jquery.countdown.js (function($) { $.fn.countdown = function(options) { // default options var d ...

  7. jquery.validate使用 - 自定义验证方法

    自定义jquery-validate的验证行为 1: 自定义表单提交 设置submitHandler来自定义表单提交动作 $(".selector").validate({    ...

  8. ASP.NET MVC jQuery 树插件在项目中使用方法(一)

    jsTree是一个 基于jQuery的Tree控件.支持XML,JSON,Html三种数据源.提供创建,重命名,移动,删除,拖"放节点操作.可以自己自定义创建,删 除,嵌套,重命名,选择节点 ...

  9. jQuery扩展$.fn、$.extend jQery命名方法扩展 练习总结

    <script> $.fn.hello = function(){  //扩展jQuery实例的自定义方法,基于$.fn的jq方法扩展     this.click(function(){ ...

随机推荐

  1. C++类的大小(转)

    一个空类class A{};的大小为什么是1,因为如果不是1,当定义这个类的对象数组时候A objects[5]; objects[0]和objects[1]就在同一个地址处,就无法区分. 单继承 # ...

  2. js 字符串常用方法

    数组方面 1.push:向数组尾部增加内容,返回的是新数组的长度. var arr = [1,2,3]; console.log(arr); var b = arr.push(4); console. ...

  3. 【LeetCode】Word Break 解题报告

    Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separa ...

  4. GG链路过多port不足导致的报错OGG-01223

    假设我们GG同步链路在增多.就有可能出现这个报错.在日志中能体现. 2014-05-20 13:32:38 WARNING OGG-01223 TCP/IP error 111 (Connection ...

  5. Autofac基本使用(转载)

    AutoFac是.net平台下的IOC容器产品,它可以管理类之间的复杂的依赖关系.在使用方面主要是register和resolve两类操作. 这篇文章用单元测试的形式列举了AutoFac的常用使用方法 ...

  6. tween用户使用指南

    tween.js user guide tween.js用户指南 1.What is a tween? How do they work? Why do you want to use them? 一 ...

  7. Linux 中权限的再讨论( 上 )

    前言 在Linux系统中,用户分为三个部分( 所有者 同组人 其他 ).每个部分的权限又可以赋予读/写/执行权限.这样,文件的权限标记一共包含 9 个权限位.好了,很多朋友对于Linux权限的了解就仅 ...

  8. iOS 图像处理-剪裁图像

    解决这个问题:依照某一长宽比例,剪裁图片的上部和下部.保留中间的内容.当然也能够自己定义须要剪裁留下的区域 前提:须要加入Framework:CoreGraphics.framework 代码: - ...

  9. Python 008- 游戏2048

    #-*- coding:utf-8 -*- import curses from random import randrange, choice # generate and place new ti ...

  10. EasyDarwin云平台:EasyCamera开源摄像机接入海康威视摄像机PS流转ES流

    本文转自EasyDarwin开源团队成员Alex的博客:http://blog.csdn.net/cai6811376 海康威视使用PS流封装H.264流,EasyDarwin云平台支持ES流.当我们 ...