Question

我有2个texbox，第一个有开始时间结束，第二个用户应该在这个格式（00:00:00）输入结束时间。如何阻止用户在第二个文本框中输入一个低于第一个文本框的值，因此结束时间必须优于开始时间，他应该警告他应该警告他。看到我的密码：

<input type="text" name="StartTime" id="StartTime" size="30"    
value="<?php echo $tab['StartTime'];?>" readonly="readonly" /></td></tr> 
<tr><td> 
<label>End Time</label> 
</td> 
<td> 
<input type="text" name="EndTime" id="EndTime" value="00:00:00"   
max="23:00" size="30" required pattern="[0-2][0-9]:[0-5][0-9]: 
[0-5][0-9]" title="Please enter end time this format   
(00:00:00),maximum    value is: 23: 59: 59"/></td></tr>

如果开始时间是例如08:00:00而用户输入07:00:00，则会弹出一条消息警告他。谢谢

Answer 1

当用户/焦点在更改后留下其中一个文本字段时，将触发验证。但是你可以随时触发它。

HTML：

StartTime:
<input type="text" name="StartTime" id="StartTime" size="30" value="08:00:00" />
<br>
<br>
EndTime:
<input type="text" name="EndTime" id="EndTime" size="30" value="16:00:00" />

的javascrip：

function validateEndTimeGreaterStartTime() {
    var valueStartTime = document.getElementById( 'StartTime' ).value;
    var valueEndTime = document.getElementById( 'EndTime' ).value;
    return Date.parse( '01/01/2015 ' + valueEndTime ) > Date.parse( '01/01/2015 ' + valueStartTime );
};

var elementStartTime = document.getElementById( 'StartTime' );
var elementEndTime = document.getElementById( 'EndTime' );
elementStartTime.onchange = function() {
    if ( !validateEndTimeGreaterStartTime() ) {
        alert( "EndTime should be greater than StartTime" );
    }
};
elementEndTime.onchange = function() {
    if ( !validateEndTimeGreaterStartTime() ) {
        alert( "EndTime should be greater than StartTime" );
    }
};

JSFiddle：https://jsfiddle.net/Lz60s0gp/

阻止用户在文本框中输入更大的值

1 个答案: