从前面的示例中不难看出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. 《好好说话》zz

    最近,<奇葩说>闹出来了一些不愉快. 在半决赛中,姜思达惜败,愤怒的粉丝把矛头指向那场比赛的其他人.最终,马薇薇.黄执中和网友们吵起来了. 这件事本不算大事,毕竟娱乐业就是这个样子.刚刚好 ...

  2. (转)MongoDB在mongo控制台下的基本使用命令

    成功启动MongoDB后,再打开一个命令行窗口输入mongo,就可以进行数据库的一些操作. 输入help可以看到基本操作命令: show dbs:显示数据库列表 show collections:显示 ...

  3. SAM4E单片机之旅——1、LED闪烁之空循环

    最近因为导师要写一本关于SAME4单片机的书籍,而我也作为一个嵌入式的初学者看了这本书.现在也让我写写几个小的程序,做做示例.既然写了文档之类的,就发到博客上来吧. 目前关于这芯片能参考的书籍大概就只 ...

  4. EasyDarwin开源摄像机访问EasyCamera中海康摄像头语音对讲和云台控制转发实现

    转自:http://blog.csdn.net/yanzhuomin/article/details/52887311 EasyCamera中关于摄像头SDK的调用都集中在EasyCameraSour ...

  5. Hibernate中的事务处理流程详解

    一.Hibernate操作的基本流程 使用 Hibernate 进行数据持久化操作,通常有如下步骤: 1.编写持久化类: POJO + 映射文件 2.获取 Configuration 对象 3.获取 ...

  6. 九度OJ 1141:Financial Management (财务管理) (平均数)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:939 解决:489 题目描述: Larry graduated this year and finally has a job. He's ...

  7. please add a 'mainClass’ property

    when build an spring project with this command: mvn spring-boot:run there will may show an error mes ...

  8. cc 和gcc编译器

    从名字上看,老的unix系统的CC程式叫做C Compiler.但GCC这个名字按GNU的说法叫做Gnu Compiler Collection.因为gcc包含非常多编译器(C, C++, Objec ...

  9. 事件 MotionEvent

    点击和长按可能会同时发生,需要在长按的回调函数中返回true,就不会产生点击.谁处理事件谁就是消费者 如果view组件不处理事件,最后会让ontouchevent处理,它是备胎 <LinearL ...

  10. 对xml文件的sax解析(增删改查)之一

    crud(增删改查): c:creat r:retrieve u:update d:delete 以下笔记来自于韩顺平老师的讲解. 现在是用java来操作. 第一步:新建java工程.file-new ...