如何通过javascript从输入字段验证值

Question

我有两个文本字段，当我拿起鼠标时，日历和输入时间的文本会同时出现在两个文本字段中。 第一个文本字段应该小于另一个文本字段。为此，我使用了javascript但它不起作用。我的代码是：-

<form method="post" action="Compvac8.jsp">
Select Reference:
<select name="ref_logtime" >
<option value="Select">Select</option>
<c:forEach var="aff" items="${obj.connect()}">
<option value="${aff.value}">${aff.key} ${aff.value}</option>
</c:forEach>
</select>

<br><br>
<b>Select Date to be compared</b><br>
<p>Date: <input type="text" name="datepicker" id="datepicker"></p>

<input id="startdate" type="text" size="25" name="startdate" onclick="javascript:NewCal('startdate','ddmmmyyyy',true,24)" >
<a>
<img src="images/cal.gif" width="10" height="10" border="0" alt="Pick a date">
</a>

<input id="enddate" type="text" size="25" name="enddate" onclick="javascript:NewCal('enddate','ddmmmyyyy',true,24)" >
<a>
<img src="images/cal.gif" width="10" height="10" border="0" alt="Pick a date">
</a>

 <input type="submit"  onclick="date_comapare()" value="Submit"><br>

</form>

JavaScript代码是-

  function date_comapare()
{

   var d1=document.getElementById("startdate").value; // start date
   var d2=document.getElementById("enddate").value; //end date
   //if (new Date(d2).valueOf() < new Date(d1).valueOf()) 
       alert(d1);
   alert(d2);
   if(new Date(d2).getTime() < new Date(d1).getTime())

   {
      alert("Endate date should be greater than start date");  // handle  your error validation here
      return false;
   }return true;
}
</script>

我什至也尝试过使用javascript-

if(d2 < d1)
   {
      alert("Endate date should be greater than start date"); 
      return false;
   }

我希望开始日期小于结束日期，该怎么做，我也可以使用服务器端验证。

Answer 1

文档功能错误，需要为：

   var d1=document.getElementById("startdate").value; // start date
   var d2=document.getElementById("enddate").value; //end date

您正在传递字符串而不是变量。

if(new Date(d2).valueOf() < new Date(d1).valueOf())

请确保您用来初始化Date的值是有效的构造函数参数。 MDN 在这里有很棒的页面

Answer 2

您有2个问题，应该是getElementById而不是getElementIdBy然后d1和d2是变量而不是字符串文字

function date_comapare() {

    var d1 = document.getElementById("startdate").value; // start date
    var d2 = document.getElementById("enddate").value; //end date

    if (new Date(d2) < new Date(d1)) {
        alert("Endate date should be greater than start date"); // handle  your error validation here
        return false;
    }
    return true;
}

Answer 3

您必须在date_compare函数中返回true

<script type="text/javascript">
function date_comapare()
{

   var d1=document.getElementById("startdate").value; // start date
   var d2=document.getElementById("enddate").value; //end date

   if(new Date('d2').valueOf() < new Date('d1').valueOf())
   {
      alert("Endate date should be greater than start date");  // handle      your error validation here
      return false;
   }

   return true; // <------ here, you should return true.

}

Answer 4

使用date.getTime方法

if (new Date(d2).getTime()  <  new Date(d1).getTime()) {}

Answer 5

好吧，我不知道NewCal的用途是NewCal ，如果这使日期格式正确，请尝试以下操作：

new Date(d2).valueOf() < new Date(d1).valueOf()

Date接受一个时间值作为参数，该值可以是数字，例如'2010/2/1'或'1995年12月17日'等。在您的情况下，请尝试验证它，例如console.log(new Date(d1)) 。

要使用console.log（），必须在firefox中安装firebug。如果没有，则不能使用alert。在分配d1之后立即将其放入函数中。 像var d1=...;alert(new Date(d1)) 。 @Arunprasanth KV'9-10-2015'不是有效的Date（）参数。