Javascript 如何验证动态创建的具有时间值的文本框
我一直认为这个问题很容易解决，问题是验证动态创建的文本框值，从我从值Javascript 如何验证动态创建的具有时间值的文本框,javascript,php,jquery,validation,Javascript,Php,Jquery,Validation,我一直认为这个问题很容易解决，问题是验证动态创建的文本框值，从我从值01:00写入的第一个文本框到值03:00，在第二个文本框中，我将值写为'02:00'到'04:00'，因此我想在单击“验证”按钮时验证它，它应该限制它，因为该值（“02:00”-“04:00”）介于（“01:00-03:00”）之间，所以它应该进行验证，并在其他新创建的动态文本框中进行验证 ------------------------------------------------------------ |from 01
01:0003:00------------------------------------------------------------
|from 01:00 to 03:00
|from 02:00 to 04:00 **restriction**
|from 03:00 to 05:00 right value(validated)
......
....
--------------------------------------------------------------
<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>
div{
填充：8px；
}
jQuery添加/删除文本框示例
$（文档）.ready（函数（）{
var计数器=2；
$（“#添加按钮”）。单击（函数（）{
如果（计数器>10）{
警报（“仅允许10个文本框”）；
返回false；
}
var newTextBoxDiv=$（document.createElement（'div'））
.attr（“id”，“TextBoxDiv”+计数器）；
newTextBoxDiv.after（）.html（'From'+counter+'：'+
“+”到“+计数器+”：“+
'');
newTextBoxDiv.appendTo（“#textboxsgroup”）；
计数器++；
});
$（“#移除按钮”）。单击（函数（）{
如果（计数器==1）{
警报（“不再需要删除文本框”）；
返回false；
}
计数器--；
$（“#TextBoxDiv”+计数器）.remove（）；
});
$（“#getButtonValue”）。单击（函数（）{
var msg=''；
var$textbox=''；
对于（i=1；i=$textbox1&&$textbox2您应该尝试以下代码
<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>
jQuery添加/删除文本框示例
div{
填充：8px；
}
jQuery添加/删除文本框示例
$（文档）.ready（函数（）{
var计数器=2；
$（“#添加按钮”）。单击（函数（）{
如果（计数器>10）{
警报（“仅允许10个文本框”）；
返回false；
}
var newTextBoxDiv=$（document.createElement（'div'））.attr（“id”，“TextBoxDiv'+计数器”）.attr（“class”，“time”）；
newTextBoxDiv.after（）.html（'From'+counter+'：'+
“+”到“+计数器+”：“+
'');
newTextBoxDiv.appendTo（“#textboxsgroup”）；
计数器++；
});
$（“#移除按钮”）。单击（函数（）{
如果（计数器==1）{
警报（“不再需要删除文本框”）；
返回false；
}
计数器--；
$（“#TextBoxDiv”+计数器）.remove（）；
});
$（“#getButtonValue”）。单击（函数（）{
var msg=''；
var$textbox=''；
对于（i=1；i=0；$j--）
{
//警报（'asdads='+$j）；
如果（$txtval>$（'#TextBoxDiv'+（$i-$j））.find（'#textbox'+（$i-$j））.val（）&&$txtval<$（'#TextBoxDiv'+（$i-1））.find（'#totime'+（$i-1））.val（））
{
$（'#TextBoxDiv'+$i）.find（'#textbox'+$i.val（“”）；
警报（“限制”）；
}
}
$i++；
});
});
});
从：到：