Question

我编写了一个代码，用于显示在jquery的两个输入文本框中输入的值。如何检查文本框是否填充了值？我已经完成了更改功能，以显示从文本输入框输入的值，以显示在html中。我想验证输入框是否在jquery中填充值。怎么检查？我只检查了输入值的时间。

Javscript：

  <script type="text/javascript">

    $(document).ready(function(){

    $("input").change(function(){

    var startDate = $("#start-date").val();
    var endDate = $("#end-date").val();

    $(".rentdate").html("Rental Date<span> From:"+startDate+" To:"+endDate);

    });
    });

    </script>

HTML：

<input type="text" id="start-date" name="start" placeholder="Select Date" data-date-format="DD, MM d" class="input-sm form-control"/><span class="date-text date-depart"></span>

<input type="text" id="end-date" name="end" placeholder="Select Date" data-date-format="DD, MM d" class="input-sm form-control"/><span class="date-text date-return"></span>

Answer 1

使用input代替change

$("input").on('input',function(){

var startDate = $("#start-date").val();
var endDate = $("#end-date").val();

$(".rentdate").html("Rental Date<span> From:"+startDate+" To:"+endDate);

});

这是DEMO

Answer 2

您可以使用if condition来检查变量是否为空。有关详细信息，请参阅以下代码。

<script type="text/javascript">

$(document).ready(function(){

    $("input").change(function(){

        var startDate = $("#start-date").val();
        var endDate = $("#end-date").val();

        if($.trim(startDate) == ""){
            alert("Please enter start date.");
        }else if($.trim(endDate) == ""){
            alert("Please enter end date.");
        }else {
            $(".rentdate").html("Rental Date<span> From:"+startDate+" To:"+endDate);

            });
        }
    });
});

</script>

Answer 3

var startDate = $("#start-date").val();
var endDate = $("#end-date").val();

由于您将文本输入的值存储在变量中，因此您可以使用下面的比较直接检查值是否为空

if((startDate =="")||(endDate == ""))
{

alert("Please Fill both text Boxes")
}

Answer 4

试试这个：

<script type="text/javascript">

	$(document).ready(function(){

		$("input").on('input keyup',function(){

			var startDate = $("#start-date").val();
			var endDate = $("#end-date").val();
		
			$("#result").html("Rental Date<span> From:"+startDate+" To:"+endDate);

		});
	});

</script>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
	<input type="text" id="start-date" name="start" placeholder="Select Date" data-date-format="DD, MM d" class="input-sm form-control"/><span class="date-text date-depart"></span>

<input type="text" id="end-date" name="end" placeholder="Select Date" data-date-format="DD, MM d" class="input-sm form-control"/><span class="date-text date-return"></span>


<div id="result"></div>
</body>

</html>

Answer 5

最简单的方法是使用正则表达式。此外，如果您想立即显示输入值，请考虑事件keyup而不是change，只有在字段丢失焦点后才会触发更改事件。
所以，说这个，你的JS可能看起来像：

    $(document).ready(function(){

      $("input").keyup(function(){

       var startDate = $("#start-date").val();
       var endDate = $("#end-date").val();
       var regexp = new new RegExp("\\d\\d, \\d\\d \\d"); // based on data-date-format atribute of input fields

       if(!regexp.test(startDate)){ 
         alert("Please enter start date.");
       } else if(!regexp.test(endDate)){
         alert("Please enter end date.");
       } else {
         $(".rentdate").html("Rental Date<span> From:"+startDate+" To:"+endDate);
       }
     });
   });

如何检查两个输入框是否在jquery中输入了值？

5 个答案: