html5 form 验证状态,触发HTML5表单验证

不关心旧浏览器吗？使用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示例。