JS/jQuery - 验证 HTML 文档的开始时间和结束时间答案

【问题标题】：JS/jQuery - Validate start time and end time on a HTML documentJS/jQuery - 验证 HTML 文档的开始时间和结束时间
【发布时间】：2014-02-03 15:27:41
【问题描述】：

我有一个 PHP/HTML 页面，它使用了一些 javascript 和 jQuery 功能。我对这些编码语言几乎没有经验。

我使用库和工具，所以我会列出这些，因为他们可以选择为我的问题提供解决方案。使用当前的库，我只需在输入标签的末尾键入“必需”，例如input name="end_time" type="text" id="end_time" required

我使用 jQuery timepicker，通过以 15 分钟为间隔选择小时和分钟来选择时间。我要做的是确保开始时间不能大于结束时间。

我已经对 javascript/jquery 做了一些研究，到目前为止我有：

function validateTime(){
var time_1 = document.getElementById("start_time").value;
var time_2 = document.getElementById("end_time").value;
 if (time_1 > time_2) {
  alert("It appears you chose a start time which is later than your end time.");
 }
}

理论上这应该可行，但这种警报很烦人。更不用说它可能会在任何输入甚至输入结束时间输入之前运行。我很想知道是否可以为此使用一些内置的验证弹出窗口，因为我想避免使用警报。

这些是我参考的 jQuery 文件：

code.jquery.com/jquery-1.9.1.js

code.jquery.com/ui/1.10.3/jquery-ui.js

以下是默认验证弹出窗口的示例：http://oi60.tinypic.com/246lxeu.jpg

当谈到 javascript 时，我是一个完全的业余爱好者，我只是碰巧进行了这个验证，它非常适合我目前使用它的用途，但我不知道哪个文件包含验证以及什么可以使用它。如果可能的话，我很乐意为此目的使用 jQuery 中包含的验证。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您可以使用oninvalid event，您只需要指定模式，无论是字母数字还是文本或数字。

<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Plz enter on Alphabets ')" />

这是更新后的Fiddle

【讨论】：

这看起来很有希望，有什么办法可以修改它以类似于我帖子中的功能吗？
检查更新的小提琴。里面有两个例子。
我检查了小提琴，但它似乎不允许我根据原始帖子的功能（或类似功能）触发验证错误。我需要验证来检查开始时间是否大于结束时间，如果是 - 然后触发验证消息。

【解决方案2】：

放弃 JS，PHP 验证就足够了。

【讨论】：