Question

我正在构建一个jQuery插件，用于在视频上创建字幕，我使用库 Timepicker UI 来定义开头和结尾，每个字幕都开始和结束。

我使用输入标记：

<input class="HoursStart hasDatepicker valid" type="text"
 value="0" name="HoursStart">

javascript 代码使用格式（ hh：mm：ss ）：

$('.HoursStart ').timepicker(
{
    showSecond: true,
    timeFormat: 'hh:mm:ss'
});

问题在于验证：

有没有办法让输入接受格式 hh：mm：ss （只是正确范围内的数字）？
有没有办法在两个输入之间进行比较（类似于 if（12:21:12＆gt; 11:31:12））？

我非常感谢您帮助解决此验证问题。如果有另一个jQuery库可以满足我的需求，那么对于我来说，更改为其他jQuery库不是问题。

Answer 1

以下是 fiddle ，用于测试regex并比较时间字符串：

$(function () {
   var timeRegex = new RegExp('([0-9]{2}):([0-9]{2}):([0-9]{2})');
    var originalTime = "00:10:20";

    $('#submit').click(function(){
       var time = $.trim($('#time').val());
       var isTime = timeRegex.test(time);
       var greater = time > originalTime;
        var testString = "Is correct format: "+isTime +", is greater:" + greater;
       window.alert(testString); 
    });
});

有关比较该时间格式的更多讨论 How can I compare two time strings in the format HH:MM:SS?

Answer 2

以下时间选择器可能很有用，因为它只需要jquery而不需要包含任何库。 http://jsfiddle.net/W4wwv/3/

HTML：

    <span class="timepicker">
    <input type="text" name="hh" class="hh" maxlength="2" size="2" placeholder="HH">:
    <input type="text" name="mm" class="mm" maxlength="2" size="2" placeholder="MM">:
    <input type="text" name="ss" class="ss" maxlength="2" size="2" placeholder="SS">
    </span>
    <br/>
    <br/>
    <br/>
    <br/>
    <div id="h"></div>
    <div id="m"></div>
    <div id="s"></div>

CSS：

    .timepicker{
    border:1px solid #c0c0c0;
    display:block;
    height:23px;
    width:98px;
    }
    .timepicker input{
    width:25px;
    border:0px;
    margin-bottom:1px !important;
    maxlength:2
    }

JS：

    var validateNumber = function(n, min, max){

            if(n > max)return max;
            else if(n < min)return min;
            return n;
    };

    var validateAfterChange = function(n , min){

            var numReg = /^[0-9]{1,2}$/;

            if(!numReg.test(n))                     
            return "00";
            if(n.length <= 1) return "0"+n;
            return n;
    }

    $(".hh")
    .on("keyup", function(){
        var v = validateNumber($(this).val(), 0, 23);
    $(this).val(v);
    $("#h").html($(this).val());
    })
    .on("change", function(){
            var v = validateAfterChange($(this).val(), 0);
            $(this).val(v);
    });


    $(".mm")
    .on("keyup", function(){
            var v = validateNumber($(this).val(), 0, 60);
            $(this).val(v);
            $("#m").html($(this).val());
    }).on("change", function(){
        var v = validateAfterChange($(this).val(), 0);
            $(this).val(v);
    });

    $(".ss")
.on("keyup", function(){
        var v = validateNumber($(this).val(), 0, 60);
    $(this).val(v);
    $("#m").html($(this).val());
}).on("change", function(){
        var v = validateAfterChange($(this).val(), 0);
    $(this).val(v);
    });

jQuery datetimepicker验证 - Timepicker UI

2 个答案: