Question

我有以下代表时间的控件：

<div id="xxx">
   <input type="text" name="xxx.hour"/>
   <input type="text" name="xxx.minute"/>
</div>

因为我想添加验证，我补充道：

<div id="xxx" data-val="true" data-val-time="Time no valid">
   <input type="text" name="xxx.hour"/>
   <input type="text" name="xxx.minute"/>
</div>

我添加了适配器和方法：

$.validator.addMethod("time_method", function (val, el, params) {

    var elementId = $(el).attr('id');
    alert('id ' + elementId);
    var hour= $(el).children('input[name$=.hour]').val();
    var minute= $(el).children('input[name$=.minute]').val();

    return hour>= 0 && hour<24 && minute>=0 && minute<23;
});

$.validator.unobtrusive.adapters.add("time", {},
function (options) {
    options.rules["time_method"] = true;
    options.messages["time_method"] = options.message;
});

但是方法“time_method”永远不会被执行，我想因为jquery.validate只适用于输入标签，我是对的吗？

最好的方法是什么？

感谢。

更新：我知道可以通过多种方式完成，我只是对这种方式的可能性感兴趣。我已经简化了问题，以显示我正在努力实现的一个非常小而愚蠢的例子。

Answer 1

演示： http://so.devilmaycode.it/jquery-unobstrusive-validation-on-composite-html-control

您的代码应如下所示：

$(function() {
    $.validator.addMethod('time_method',function(val, el) {
        var re,max;
        if (el.id == 'xxx_hour') {
            re = /^\d{1,2}$/;
            max = 24;
        }
        if (el.id == 'xxx_minute') {
            re = /^\d{2}$/;
            max = 59;
        }
        return re.test(val) && val >= 0 && val <= max;
    },
    'Time no valid');

    $("#xxx").validate({
        rules: {
            xxx_hour: 'time_method',
            xxx_minute: 'time_method',
        }
    });
});

你的html类似于：

<form id="xxx">  
 <input type="text" name="xxx_hour" id="xxx_hour" maxlength="2"/>
 <input type="text" name="xxx_minute" id="xxx_minute" maxlength="2"/>
</form>

Answer 2

由于小时和分钟的验证是独立的，您可以在两个输入字段中添加单独的验证器。

Answer 3

为什么不使用这样的东西：http://jsfiddle.net/3KCd4/2/

Answer 4

我会保持简单。分钟和小时的单独消息或单独的输入和其他适配器似乎过于复杂。你需要的只是时间输入的好正则表达式。插件中已包含正则表达式验证器适配器。

<input data-val="true" data-val-regex="Time is not valid" data-val-regex-pattern="^([0-1][0-9]|[2][0-3]):([0-5][0-9])$"
        type="text" id="time" name="time" value="" />

将正则表达式应用于它的想法是我的。正则表达式模式取自here。

该验证插件（以及大多数验证插件可能）依赖于input元素特定属性，首先是value，然后是可以触发验证的受支持事件。 div不支持value，也不支持onchange或其他事件。

如果要验证的对象如此复杂，我建议在服务器上或仅在表单提交事件中编写该验证，而不使用那些动态验证和错误消息show -ups。

Answer 5

由于按键和更改事件会冒泡，您可以使用

//in $.ready
$('div#xxx').keypress(function(){
    //Do validation
}

如果您希望在输入元素失去焦点时进行验证，请使用更改替换按键。

jQuery对复合html控件的不引人注意的验证

5 个答案: