php - 日期和时间验证(PHP 和 MySQL)

Question

我有一个 HTML 表单，将日期和时间作为输入:

<div>
  <label for="date_of_appointment">Date of appointment *</label>
  <input type="date" name="date_of_appointment" id="date_of_appointment"
         value="<?php echo $date_of_appointment; ?>"
  required oninvalid="setCustomValidity('Fill in the date')"
  oninput="setCustomValidity('')">
</div>

<div>
  <label for="time_of_appointment">Time of appointment *</label>
  <input type="time" name="time_of_appointment" id="time_of_appointment"
         value="<?php echo $time_of_appointment; ?>"
         required oninvalid="setCustomValidity('Fill in the time')"
         oninput="setCustomValidity('')">
</div>

我正在使用 HTML5 输入类型日期 和时间。 捕获所有浏览器中的所有错误非常重要。 您将如何设计验证以确保用户会提供 插入数据库的日期和时间格式是否正确？

在我的解决方案中，我将按如下方式验证它:

1. 并非所有浏览器都提供时间/日期选择器。 这些字段的预期格式是什么？

2. 假设预期的日期格式为 YYYY-MM-DD。 我会用 PHPexplode() 函数分割它并用 PHP checkdate($月, $日, $年) 函数。 并类似地创建了预期时间格式的例程。 我可以使用 javascript 在步骤 1 和 2 之间执行更多操作，而不需要重新加载吗 一个页面，在用户输入内容后立即告诉其格式错误 破坏格式？

3. 将格式正确的值插入数据库。

Answer 1

您提出的三个步骤对我来说看起来不错。事实上，您可以在定义为步骤 1 和 2 之间执行更多操作。由于 2° 步骤是实现服务器端验证的位置，因此您在步骤 1 和 2 之间可以执行的所有操作都被视为客户端操作验证。尽管如此，使用日期时间选择器将是一个更好的解决方案，因为在某种程度上它使任务变得更容易。但是不要紧!

如 HTML5 docs 中所示约束验证部分:

"HTML5 Constraint validation doesn't remove the need for validation on the server side. Even though far fewer invalid form requests are to be expected, invalid ones can still be sent by non-compliant browsers (for instance, browsers without HTML5 and without JavaScript) or by bad guys trying to trick your web application. Therefore, like with HTML4, you need to also validate input constraints on the server side, in a way that is consistent with what is done on the client side."

您应该始终实现表单的服务器端验证，这对于安全性和数据完整性是必要的。现在，如果您想添加表单的客户端验证，以便通过向用户提供有关输入数据的即时反馈来支持更好的用户体验，您可以按照以下步骤操作:

1 - 如果浏览器支持 HTML5，并且对于输入类型日期和时间，使用内在和基本约束就足够了。为元素的 type 属性选择语义上最合适的值(例如，选择日期或时间类型)这一事实会自动创建一个约束来检查该值是否是有效的日期或时间:

<input type="date">
<input type="time">

2-如果浏览器不完全支持 HTML5，您可以添加验证相关属性 pattern 。为此，您必须构建一个可靠的 javascript 正则表达式。有很多有效的正则表达式。下面提出的日期正则表达式会区分日期和月份，并且仅验证 2 个世纪:

<input type="date" title="Enter the date in dd/mm/yyyy format" placeholder="Insert a valid date" pattern="([0-2]\d|3[0-1])\/(0\d|1[0-2])\/(19|20)\d{2}">
<input type="time" title="Insert a valid time in hh:mm:ss 24h format" placeholder="Insert a valid time" pattern="([0-1]\d|2[0-3]):[0-5]\d:[0-5]\d">

3 - 现在，对于不支持 HTML5 的浏览器，您必须添加 JavaScript 验证。这个可以使用 JavaScript 正则表达式来执行，例如 onblur():

<input type="date" title="Enter the date in dd/mm/yyyy format" placeholder="Insert a valid date" pattern="([0-2]\d|3[0-1])\/(0\d|1[0-2])\/(19|20)\d{2}" onblur="checkPattern(this)">
<input type="time" title="Insert a valid time in hh:mm:ss 24h format" placeholder="Insert a valid time" pattern="([0-1]\d|2[0-3]):[0-5]\d:[0-5]\d" onblur="checkPattern(this)">

function checkPattern(obj){
    var re = new RegExp("^"+obj.pattern+"$");
        if (!re.test(obj.value)) {
            obj.focus();
            alert("Wrong format. Please, "+obj.title);
        }
}

希望有用!