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

时间:2015-03-09 08:35:22

标签: javascript jquery html validation

我有两个文本字段,当我抓住鼠标时,然后在文本字段中出现日历和文本输入时间。第一个文本字段应该小于另一个文本字段。为此我使用了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;
   }

我希望我的startdate比enddate更小。如何做到这一点。我也可以使用服务器端验证。

5 个答案:

答案 0 :(得分:2)

Document上的错误功能,需要:

   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 with的值是有效的构造函数参数。 MDN有一个很棒的页面here

答案 1 :(得分:1)

您有两个问题,它应该是getElementById而不是getElementIdBy然后d1d2是变量而不是字符串文字

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;
}

答案 2 :(得分:0)

你必须在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.

}

答案 3 :(得分:0)

使用date.getTime方法

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

答案 4 :(得分:0)

好吧,我不知道NewCal的用途是什么,如果这个格式很好,请试试这个:

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

日期接受时间值作为参数,可以是数字或类似'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()参数。