如何使用 JavaScript 验证表单？答案

【问题标题】：How to validate form using JavaScript?如何使用 JavaScript 验证表单？
【发布时间】：2018-06-23 09:26:33
【问题描述】：

我无法验证表单，我的表单中有两个字段，一个是下拉选择，一个是日期选择器。

我希望当有人在选择下拉菜单中选择紧急处理并选择他们从今天起 5 天内的旅行日期时，表格应显示一条消息“对于未来 5 天内的旅行，请在申请类型中选择紧急处理。正常处理您只能在 5 天后旅行”并阻止提交。但它似乎不起作用。我哪里错了？

<form name="search_form" method="post" onSubmit="onSubmit="return chk();" action="applyprocess.php" autocomplete="off">

  <select name="applicationtype" class="textBoxDashed"  id="applicationtype" onChange="myFunction(this)" required>
    <option value="">Select..</option>
    <option data-price="69" value="Normal Processing">Normal Processing (Processing Time 4 to 7 Business days)</option>
    <option data-price="189" value="Urgent Processing">Urgent Processing (Processing Time 1 Business Day) </option>
  </select>

  <input name="journeydate" id="journeydate" placeholder="DD/MM/YYYY" datepicker_format="DD/MM/YYYY" class="textBoxDashed" size="43" title="Please Enter your Date of Journey" required readonly>
  <input name="button" type="submit" class="btn btn-primary" value="Continue">
</form>

这是表单验证脚本

<script language="javascript">

    if (trim(document.search_form.journeydate.value)==''){
    alert("Please Enter Valid Journey Date  ");
    document.search_form.journeydate.focus();
    return false;
    }

                    var today = new Date();
                    var dd = today.getDate()+1;
                    var mm = today.getMonth()+1;//January is 0!`

                    var yyyy = today.getFullYear();
                    if(dd<10){dd='0'+dd}
                    if(mm<10){mm='0'+mm}
                    var todayDate = dd+'../https/websitedownloaderio/MS_8.html'+mm+'/'+yyyy;
                    var number13 = Number(dd);
                    var monthNumber = Number(mm);
                    var yearNumber = Number(yyyy);
                    var currentDays = (monthNumber*30)+number13;

                    var jDate = document.search_form.journeydate.value;
                    var dd2 = jDate.slice(0,2);
                    var number12 = Number(dd2);
                    var mon2 = jDate.slice(3,5);
                    var yr2 = jDate.slice(6,10);
                    var monthNumber2= Number(mon2);
                    var yearNumber2 = Number(yr2);
                    var journeyDays = (monthNumber2*30)+number12;

                    if(number12>number13){
                    number12 = number12+30;
                    monthNumber2 = monthNumber2-1;
                    }
                    if(monthNumber2>monthNumber){
                    monthNumber2 = monthNumber2+12;
                    monthNumber2 = monthNumber2-1;
                    }

                    if(yearNumber2>yearNumber){
                    yearNumber2 = yearNumber2-yearNumber;
                    }

                    var finalDays = ((yr2-yyyy)*360)+((mon2-mm)*30)+(dd2-dd);

    if(trim(document.search_form.applicationtype.value)=='Normal Processing' && finalDays<=5)
        {
            alert("For travel within next 5 days please select Urgent Processing in the Application Type. With normal Processing you can only travel after 5 day.");
            document.search_form.applicationtype.focus();
            return false;
        }
    if(trim(document.search_form.applicationtype.value)=='Urgent Processing' && finalDays>=30)
        {
            alert("Please select normal processing from the drop down because your arrival date is beyond 30 days.");
            document.search_form.applicationtype.focus();
            return false;
        }

</script>

这是我用于日期选择器的：

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>

  $( function() {
    $( "#journeydate" ).datepicker({
      yearRange: '2018:2028',
      changeMonth: true,
      changeYear: true,
      dateFormat: 'yy-mm-dd',
      minDate: +1
    });
  } );    
  </script>

【问题讨论】：

这个问题已经有人问过了，请参考这个link
@Aquafreax - 我已经检查过了，但我无法在我的脚本中找到问题。任何建议，都会很棒。
检查：developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

标签： javascript jquery html forms validation

【解决方案1】：

您为什么不直接将所选日期转换为 UTC 日期，然后检查 now + 5 * 60 * 60 * 24 是否大于该日期？

【讨论】：

我没明白。我在编程方面并没有那么先进，它的学业阶段，如果可能的话，你能证明它吗？我们该怎么做呢。
在 javascript 中测量时间的一种方法是转换自 1970 年 1 月 1 日以来的任何格式的日期（以秒为单位）（UTC 格式）。这样你就得到一个简单的数字。只需在浏览器的控制台中键入 Date.now()。通过添加 5 天的秒数，您可以比较这两个数字，以检查宽松日期是否低于未来 5 天。这有帮助吗？
让我试试，你建议的。

【解决方案2】：

嗯，我暂时没有使用 Jquery，如果你愿意，那么你可以使用它。我认为这应该可以解决您的问题。

<html>

<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script language="javascript">

function myFunction() {
  var message,
    aptype = document.getElementById('applicationtype'),
    strVal = aptype.options[aptype.selectedIndex].value;
  if (strVal == "Normal Processing") {
    message = "Please Select Date between 5 days from now";

  } else {
    message = "Please Select Date between 10 days from now"

  }
  //let message = document.getElementById('message').value;
  document.getElementById('message').innerHTML = message;
  console.log(message);
}
function compareDate(e) {
  var selectedDate = document.getElementById('journeydate').value,
    today = new Date(),
    future_date = new Date(today.setDate(today.getDate() + 5));

  if (selectedDate < new Date() || selectedDate > future_date) {
    console.log("successfully Selected Date");
  } else {
    //message = "Please Select Date between 5 days from now";
    console.log("Please Select Date between 5 days from now");
  }
  e.preventdefault();
  }
 </script>
</head>

<body>
<form name="search_form" method="post" onSubmit="compareDate();" action="" autocomplete="off ">

<select name="applicationtype" class="textBoxDashed" id="applicationtype" onChange="myFunction(this)" required>
  <option value=" ">Select..</option>
  <option data-price="69" value="Normal Processing">Normal Processing (Processing Time 4 to 7 Business days)</option>
  <option data-price="189" value="Urgent Processing">Urgent Processing (Processing Time 1 Business Day) </option>
</select>
<div id="message"></div>
<input type="date" name="journeydate " id="journeydate" placeholder="DD/MM/YYYY ">
<!-- <input  datepicker_format="DD/MM/YYYY " class="textBoxDashed
" size="43" title="Please Enter your Date of Journey " required readonly> -->
  <input name="button" type="submit" class="btn btn-primary" value="Continue">
</form>
</body>

</html>

【讨论】：

想要同样的东西，但有一个问题，我在点击提交后面临的问题是显示消息，但它也需要表单到操作页面。
你能告诉我，显示的消息是什么，如果它直接重定向到操作页面，然后尝试从 javascript 移动到操作页面

【解决方案3】：

如果您使用date input field 会怎样？

(() => {
  const checkMark = document.querySelector("#checkedOk");
  const dateInput = document.querySelector("#dateField");
  document.querySelector("#checkDate").addEventListener("click", dateCheck);
  
  function dateCheck() {
    const value = new Date(dateInput.value);
    const isOk = value
      && value >= new Date(dateInput.min)
      && value <= new Date(dateInput.max);
    if (isOk) {
      checkMark.classList.add("ok");
    } else {
      checkMark.classList.remove("ok");
    }
    return isOk;
  }
})();

body {
  font: normal 12px/15px verdana, arial;
  margin: 2em;
}

#checkedOk:before {
  color: red;
  font-weight: bold;
  content: "X";
}

#checkedOk.ok:before {
  content: "\2714";
  color: green;
}

<input id="dateField" type="date" min="2018-01-01" max="2028-12-31">
<button id="checkDate">Check</button>
<span id="checkedOk"></span>

【讨论】：