忽然笑
不关心旧浏览器吗?使用form.reportValidity()。需要传统浏览器支持?继续阅读。它实际上是可以手动触发验证。我将在答案中使用纯JavaScript来提高可重用性,不需要jQuery。假设以下HTML表单:
Trigger validation让我们在JavaScript中抓取我们的UI元素:var form = document.querySelector('form')var triggerButton = document.querySelector('button')不需要支持Internet Explorer等传统浏览器吗?这个给你。所有现代浏览器都支持元素reportValidity()上的方法form。triggerButton.onclick = function () { form.reportValidity()}就是这样,我们完成了。此外,这是一个使用这种方法的简单CodePen。旧浏览器的方法以下是如何reportValidity()在旧版浏览器中模拟的详细说明。但是,您无需自己将这些代码块复制并粘贴到项目中 - 您可以随时使用ponyfill / polyfill。在哪里reportValidity()不受支持,我们需要稍微欺骗浏览器。那么,我们会做什么?通过致电检查表格的有效性form.checkValidity()。这将告诉我们表单是否有效,但不显示验证UI。如果表单无效,我们会创建一个临时提交按钮并触发单击它。由于表单无效,我们知道它实际上不会提交,但是,它会向用户显示验证提示。我们将立即删除临时提交按钮,因此用户永远不会看到它。如果表单有效,我们根本不需要干涉并让用户继续。在代码中:triggerButton.onclick = function () { // Form is invalid! if (!form.checkValidity()) { // Create the temporary button, click and remove it var tmpSubmit = document.createElement('button') form.appendChild(tmpSubmit) tmpSubmit.click() form.removeChild(tmpSubmit) } else { // Form is valid, let the user proceed or do whatever we need to }}这段代码几乎适用于任何常见的浏览器(我已经成功测试了IE11)。这是一个有效的CodePen示例。