上一篇: 我如何才能看到jquery-mobile中的... 下一篇:jquery – 加载后,为什么通过AJA...

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

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jQuery对复合html控件进行不引人注意的验证，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

<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只适用于输入标签,我是对的吗？

最好的方法是什么？

谢谢.

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

解决方法

演示： 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>