jquery.validate运用和扩展

川长思鸟来 2021-09-15 03:20 256阅读 0赞

## 一、运用 ##

默认校验规则

![复制代码][copycode.gif]

(1)、required:true               必输字段
    (2)、remote:"remote-valid.jsp"   使用ajax方法调用remote-valid.jsp验证输入值
    (3)、email:true                  必须输入正确格式的电子邮件
    (4)、url:true                    必须输入正确格式的网址
    (5)、date:true                   必须输入正确格式的日期，日期校验ie6出错，慎用
    (6)、dateISO:true                必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
    (7)、number:true                 必须输入合法的数字(负数，小数)
    (8)、digits:true                 必须输入整数
    (9)、creditcard:true             必须输入合法的信用卡号
    (10)、equalTo:"#password"        输入值必须和#password相同
    (11)、accept:                    输入拥有合法后缀名的字符串（上传文件的后缀）
    (12)、maxlength:5                输入长度最多是5的字符串(汉字算一个字符)
    (13)、minlength:10               输入长度最小是10的字符串(汉字算一个字符)
    (14)、rangelength:[5,10]         输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
    (15)、range:[5,10]               输入值必须介于 5 和 10 之间
    (16)、max:5                      输入值不能大于5
    (17)、min:10                     输入值不能小于10

![复制代码][copycode.gif]

原文：http://www.cnblogs.com/linjiqin/p/3431835.html（推荐-完整）

异步验证

remote：URL  
使用ajax方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用data选项

远程地址只能输出"true"或"false"，不能有其它输出。

![复制代码][copycode.gif]

示例一：
    remote: "check-email.php"
    示例二：
    remote: {
        url: "check-email.php",     //后台处理程序
        type: "post",               //数据发送方式
        dataType: "json",           //接受数据格式   
        data: {                     //要传递的数据
            username: function() {
                return $("#username").val();
            }
        }
    }

![复制代码][copycode.gif]

MVC 后台

[HttpPost]
    public ActionResult HasAccount(string account)
    {
         return Json(!AccountRule.Instance.HasAccount(account));//如果存在账号，返回false，不存在返回true
    }

## 二、扩展 ##

添加一个jquery.validate.ext.js

![复制代码][copycode.gif]

/*
    * 验证扩展
    * 
    */
    // jQuery.validator增加时间验证
    jQuery.validator.addMethod("timeISO", function (value, element) {
        if (this.optional(element)) return true;
        try {
            var strArray = value.split(" ");
            var strDate = strArray[0].split("-");
            var strTime = strArray[1].split(":");
            var a = new Date(strDate[0], (strDate[1] - parseInt(1)), strDate[2], strTime[0], strTime[1], strTime[2]);
            return a.getFullYear() > 0 && a.getMonth() > 0 && a.getDay() > 0;
        } catch (e) { }
        return false;
    }, "请输入正确的时间！");
    
    // jQuery.validator增加账号验证
    jQuery.validator.addMethod("vaccount", function (value, element) {
        return this.optional(element) || (/^\w+$/.test(value));
    }, "请输入英文、数字、下划线");
    /*
    * 
    *验证消息中文提示
    * 
    */
    $.extend($.validator.messages, {
        required: "必选字段",
        remote: $.format("该账户已存在！"),
        email: "请输入正确格式的电子邮件",
        url: "请输入正确的网址",
        date: "请输入正确的日期",
        dateISO: "请输入正确的日期(ISO)",
        number: "请输入正确的数字",
        digits: "只能输入整数",
        creditcard: "请输入正确的信用卡号",
        equalTo: "请再次输入相同的值",
        accept: "请输入拥有合法后缀名的字符串",
        maxlength: $.validator.format("字符长度最多{0}个"),
        minlength: $.validator.format("字符长度最少{0}个"),
        rangelength: $.validator.format("字符长度为{0}-{1}之间"),
        range: $.validator.format("输入值为于{0}-{1}之间"),
        max: $.validator.format("请输入一个最大为{0}的值"),
        min: $.validator.format("请输入一个最小为{0}的值")
    });

![复制代码][copycode.gif]

## 三、添加移除验证 ##

在项目中，经常碰到表单有些字段需要根据条件显示隐藏，这时手动添加移除验证就派上用场了。

$("#IDName").rules("remove");
    $("#IDName").rules("add", { required: true, messages: { required: "请输入标题" } });

本文地址：http://www.cnblogs.com/xcsn/p/4654651.html

[copycode.gif]: /images/20210724/757c2f7d356b4cf89f7fae2117d3b7ca.png