0

我正在尝试编写一个 JavaScript 函数，该函数将涵盖input对type="time". 我正在查看 jQuery Validate 的文档，但我只找到验证绑定在idorname属性上的示例。有没有办法在全球范围内做到这一点？

我想确保时间始终是格式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则返回时间，否则返回时间。

4

4 回答 4

4

引用操作：

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

就在这里。规则也可以通过使用method来应用，并且该.rules('add')方法可以附加到任何合法的 jQuery 选择器上。要在多个元素上使用此方法，您必须将其包装在 jQuery.each()方法中。（另请注意，即使您没有使用该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/

有关使用此插件添加规则的完整信息，请参阅此答案。

于 2013-08-01T15:51:54.840 回答
2

您想声明一个自定义验证方法来验证时间格式。

$.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[type="time"]').validate({
    rules: {
        value: { correctTimeFormat: true }
    }
});
于 2013-08-01T16:12:12.013 回答
0 
// 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;
    } 
}
于 2013-08-01T13:13:14.737 回答
0

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

于 2013-08-01T13:15:33.757 回答