gpt4 book ai didi

javascript - 如何验证动态创建的具有时间值的文本框

转载 作者:行者123 更新时间:2023-11-27 23:36:31 25 4
gpt4 key购买 nike

我被困在这个我认为很容易的问题上,问题是验证动态创建的文本框值,从我从值 01:00 写入的第一个文本框到值 03 :00,在第二个文本框中,我将值写入“02:00”到“04:00”,所以当我单击验证按钮时,我想验证这一点,它应该限制它,因为这个值(“02:00"-"04:00") 介于 ("01:00-03:00") 之间,因此应该对其进行验证并在其他新创建的动态文本框中进行验证

------------------------------------------------------------
|from 01:00 to 03:00

|from 02:00 to 04:00 **restriction**

|from 03:00 to 05:00 right value(validated)
......
....
--------------------------------------------------------------

enter image description here

这是我用于创建动态复选框和检查的代码 jQuery 添加/删除文本框示例

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>

<style type="text/css">
div{
padding:8px;
}
</style>

</head>

<body>

<h1>jQuery add / remove textbox example</h1>

<script type="text/javascript">

$(document).ready(function(){

var counter = 2;

$("#addButton").click(function () {

if(counter>10){
alert("Only 10 textboxes allow");
return false;
}

var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);

newTextBoxDiv.after().html('<label>From'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >'+'<label>To'+ counter + ' : </label>' +
'<input type="text" name="totime' + counter +
'" id="totime' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");


counter++;
});

$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}

counter--;

$("#TextBoxDiv" + counter).remove();

});

$("#getButtonValue").click(function () {

var msg = '';
var $textbox='';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
$("#validate").click(function () {


msg=$('#textbox' + 1).val();
$textbox1= $('#textbox1').val();
$totime= $('#totime1').val();
$textbox2= $('#textbox2').val();


if($textbox2>=$textbox1&&$textbox2<=$totime)
{
alert("true");
}
else
{
alert("false");
}


});
});
</script>
</head>
<body>

<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>From : </label><input type='textbox' id='textbox1' > <label>To : </label><input type='textbox' id='totime1' >
</div>

</div>



<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
<input type='button' value='Validate' id='validate'>

</body>
</html>

最佳答案

你应该尝试这个代码

    <html>
<head>
<title>jQuery add / remove textbox example</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>

<style type="text/css">
div{
padding:8px;
}
</style>

</head>

<body>

<h1>jQuery add / remove textbox example</h1>

<script type="text/javascript">

$(document).ready(function () {

var counter = 2;

$("#addButton").click(function () {

if (counter > 10) {
alert("Only 10 textboxes allow");
return false;
}

var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter).attr("class", 'time');

newTextBoxDiv.after().html('<label>From' + counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >' + '<label>To' + counter + ' : </label>' +
'<input type="text" name="totime' + counter +
'" id="totime' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");


counter++;
});

$("#removeButton").click(function () {
if (counter == 1) {
alert("No more textbox to remove");
return false;
}

counter--;

$("#TextBoxDiv" + counter).remove();

});

$("#getButtonValue").click(function () {

var msg = '';
var $textbox = '';
for (i = 1; i < counter; i++) {
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
$("#validate").click(function () {
$i = 1;
$('.time').each(function () {

//alert('i='+$i);

$txtval = $('#TextBoxDiv' + $i).find('#textbox' + $i).val();
val= ($i + 1);
for ($j = val; $j >= 0; $j--)
{

// alert('asdads='+$j);
if ($txtval > $('#TextBoxDiv' + ($i - $j)).find('#textbox' + ($i - $j)).val() && $txtval < $('#TextBoxDiv' + ($i - 1)).find('#totime' + ($i - 1)).val())
{
$('#TextBoxDiv' + $i).find('#textbox' + $i).val("");
alert('restriction');

}
}
$i++;
});

});
});
</script>
</head>
<body>

<div id='TextBoxesGroup'>
<div id="TextBoxDiv1" class="time">
<label>From : </label><input type='textbox' id='textbox1' > <label>To : </label><input type='textbox' id='totime1' >
</div>

</div>



<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
<input type='button' value='Validate' id='validate'>

</body>
</html>

关于javascript - 如何验证动态创建的具有时间值的文本框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34091973/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com