jQuery 验证给定类型的所有输入

Question

我正在尝试编写一个 JavaScript 函数来验证 type="time" 的所有 input 元素。我正在查看 jQuery Validate 的文档，但我只找到验证绑定在 id 或 name 属性上的示例。有没有办法在全球范围内做到这一点？

我想确保时间的格式始终为hh:mm。我找到了一个可以验证我的时间的函数（见下文）。当这个函数返回false 时，我会调用一个addError() 函数来向表单添加一个错误。我不知道该怎么做。

// Check is the input is a valid time
function formatTime(time) {
    var result = false, m;
    var re = /^\s*([01]?\d|2[0-3]):([0-5]\d)\s*$/;
    if ((m = time.match(re))) {
        result = (m[1].length == 2 ? "" : "0") + m[1] + ":" + m[2];
    }
    return result;
}

// Trigger the validation on the onBlur event
$("input[type=time]").blur(function () {
    var value = formatTime($(this).val());
    if (value == false) {
        addError($(this));
    }
});

Edit1：看来我的复制/粘贴技能不太好。在formatTime() 中，如果格式有效，则返回时间，否则返回false。

Answer 1

引用 OP：

“我正在查看 jQuery Validate 的文档，但我只是 查找验证绑定在 id 或 name 上的示例 财产。有没有办法在全球范围内做到这一点？”

是的，有。也可以使用the .rules('add') method 应用规则，并且此方法可以附加到任何合法的jQuery 选择器。要在多个元素上使用此方法，您必须将其包装在 the jQuery .each() method 内。 （另请注意，即使您没有使用name 属性，每个input 也必须包含唯一的name。）

$(document).ready(function() {

    $('#myform').validate({  // initialize the plugin on your form
        // any rules and/or options
    });

    $('input[type="time"]').each(function() {
        $(this).rules('add', {
            required: true,
            // another rule, etc.
        });
    });

});

工作演示：http://jsfiddle.net/g8YFa/

See this answer for complete info about adding rules using this plugin.

Answer 2

您想declare a custom validation method 验证时间格式。

$.validator.addMethod('correctTimeFormat', function (value, element) {
    var result = false, m, regex = /^\s*([01]?\d|2[0-3]):([0-5]\d)\s*$/;

    if (m = value.match(regex)) {
        result = (m[1].length === 2 ? '' : '0') + m[1] + ':' + m[2];
    }

    return result;
}, 'Invalid time format.');

然后，要求所有 input time 字段的自定义验证方法。

$('input[type="time"]').validate({
    rules: {
        value: { correctTimeFormat: true }
    }
});

Answer 3

// Check is the input is a valid time
function formatTime(time) {
    var result = false, m;
    var re = /^\s*([01]?\d|2[0-3]):([0-5]\d)\s*$/;
    if ((m = time.match(re))) {
        //Well it seems like its valid lets return true!  
        return true;
    }else{
       //Well it seems like this is invalid return false!  
        return false;
    } 
}

Answer 4

您必须从 formatTime() 函数返回值 true/false。这样它将设置在您的“var value = formatTime($(this).val());”上声明！