Question

这是我的html代码，其中只有我试图用来使无效/验证日期条目的代码的片段，希望声明所有相应和必要的变量。

       <html>
       <head>
       <title> Booking Page </title>

       <script>

       function Booking(){

        var departuredate = document.getElementById("departdate").value; //departure date selected by user
        var arrivaldate = document.getElementById("arrivedate").value; //arrival date selected by user

        departuredate = new Date(departuredate);
        arrivaldate = new Date(arrivaldate); 

        CurrentDate = new Date(); //todays date

                month = '' + (arrivaldate.getMonth() + 1),
                day = '' + arrivaldate.getDate(),
                year = arrivaldate.getFullYear();
                var adate = [day, month, year].join('/');
                alert(adate);

adate仅适用于抵达日期。我计划在出发日期正确后复制并调整代码。目前，代码似乎使所有条目无效，不允许验证完全有效的条目。

         var re = /[0-9]{2}\/[0-9]{2}\/[0-9]{4}/;
         if (!adate.match(re))
         {
            document.getElementById("temp").innerHTML = "Incorrect format"
            document.MyForm.arrivedate.focus();
            document.getElementById("arrivedate").style.border='1px solid red';
            return false;
          } 

          else 
          {
            // if none of the above situaton's occur then the input is true and validated
            alert('Dates are validated');
            return true;          
           }

           }
           </script>

           </head>
           <body>

           <H1> Booking Form </H1>

          <Form action="testpage.py" method="POST" name="MyForm" onsubmit="return Booking()">


            <p>Departure Date:</p>
            <input type=date name="departdate" id="departdate" > 

            <p>Arrival Date:</p>
            <input type=date name="arrivedate" id="arrivedate">

            <input type=submit value="Find flights">

           </Form>        
           </body>
           </html>

Answer 1

这里有多个问题。首先，输入的日期类型是非标准的，因此它在大多数浏览器中都不起作用（IIRC chrome，edge和iOS safari是例外）。

我建议你使用像jquery-ui-datepicker这样的第三方库，或者使用带有验证逻辑的文本输入，使用html模式属性或js事件处理程序，如果你必须支持桌面safari（没有＆＃ 39; t支持模式属性。）

像<input type="text" pattern="/[0-9]{2}\/[0-9]{2}\/[0-9]{4}/" ...

之类的东西

或者如果模式不起作用：

var myDateInput = document.getElementById('date-input');
myDateInput.addEventListener('change', function(e) {
  if (!(e.target.value.match(dateRegex)) {
    //let user know somehow
  }
});

您可以限制处理程序，以便它不会在连续的击键时触发。另请注意，即使在具有日期输入类型的浏览器中，他们也期望＆＃34; yyyy-mm-dd＆＃34;格式，所以让你的正则表达式：

/[0-9]{4}-[0-9]{2}-[0-9]{2}/。

无法正确无效/验证日期（到达日期）？

1 个答案: