日期和时间验证（PHP和MySQL）-Java 学习之路

我有一个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 . 捕获所有浏览器中的所有错误非常重要 . 您将如何为此设计验证以确保用户以正确的格式提供日期和时间以插入数据库？

在我的解决方案中，我将验证如下：

并非所有浏览器都提供时间/日期选择器 . 这些领域的预期格式是什么？
假设预期日期格式为YYYY-MM-DD . 我会用PHP explode（）函数拆分它并使用PHP checkdate（$ month，$ day，$ year）函数进行验证 . 同样为预期的时间格式创建了一个例程 . 我可以在步骤1和2之间使用javascript做更多的事情，而不需要重新加载页面告诉用户格式错误，他会输入违反格式的东西吗？
将具有正确格式的值插入DB .

1 回答

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

因为它出现在HTML5 docs约束验证部分：

“HTML5约束验证不会消除服务器端验证的需要 . 即使预期的无效表单请求少得多，但仍然可以通过不兼容的浏览器（例如，没有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);
        }
}
```
希望它有用！
回复于 2024-04-28T20:20:24+08:00

日期和时间验证（PHP和MySQL）

1 回答

相关问题