日期和时间验证（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 输入类型 date 和 time。 捕获所有浏览器中的所有错误很重要。 您将如何为此设计验证以确保用户将提供 插入数据库的正确格式的日期和时间？

在我的解决方案中，我将按如下方式对其进行验证：

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

2. 假设预期的日期格式是 YYYY-MM-DD。 我会用 PHP explode() 函数拆分它并使用 PHP checkdate($month, $day, $year) 函数。 并且类似地为预期时间格式创建了一个例程。 我可以在第 1 步和第 2 步之间使用 javascript 做更多事情，而无需重新加载 一个页面告诉用户格式错误，他立即输入内容 打破格式？

3. 将格式正确的值插入 DB。

Answer 1

您提出的三个步骤对我来说看起来不错。实际上，您可以在定义为步骤 1 和 2 之间做更多的事情。因为，2º 步骤是您实现服务器端验证的地方，所以您在步骤 1 和 2 之间可以做的所有事情都被认为是客户端验证。虽然，使用日期时间选择器将是一个更好的解决方案，因为在某种程度上它使任务更容易。但是没关系！

正如它出现在HTML5 docs 约束验证部分：

"HTML5 约束验证并没有消除对 服务器端。即使无效的表单请求要少得多 预期，无效的仍然可以由不兼容的浏览器发送 （例如，没有 HTML5 和 JavaScript 的浏览器）或通过 试图欺骗您的 Web 应用程序的坏人。因此，就像 HTML4，您还需要在服务器端验证输入约束， 以一种与客户端所做的一致的方式。”

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

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

希望有用！