使用函数而不是模式的 HTML5 输入验证答案

【问题标题】：HTML5 input validation with function rather than pattern使用函数而不是模式的 HTML5 输入验证
【发布时间】：2019-03-22 01:14:21
【问题描述】：

我有一个表单，其中一些输入（如电子邮件）使用 HTML5 中的正则表达式进行验证。我需要验证无法使用模式的其他输入。我需要查看数据库并查找重复项。我可以通过调用某个函数而不是使用模式来验证吗？

我可以通过调用某个函数来验证用户键入的内容，但我的最终目标是实现 UI 一致性。因为电子邮件输入是使用模式和正则表达式验证的，所以 UI 是由浏览器创建的，所以在验证无法使用正则表达式的其他字段时，我希望使用相同的 UI。

【问题讨论】：

这是可以做到的，但是您会远离 HTML5 样式的验证，特别是因为您的函数必须是异步的才能查找数据库。（我 99% 确定“pre-HTML5”JS 验证框架已经存在，所以你可以尝试其中任何一个）
您可以做到，只需执行 AJAX 请求即可针对数据库验证您的数据。
你可以使用jQuery轻松实现这个效果。您可以使用 jQuery.change() 函数通过 jQuery.ajax() 或特定的 jquery.post()/jquery.get() 函数来基本动态验证输入。
如果用户输入重复值，我需要显示错误消息。由于消息依赖于浏览器，是否可以实现与 HTML5 相同的 UI？
jac0117，您在评论中的问题更加具体且易于回答（答案是“否”）。但与原来的问题不同。

标签： html forms validation

【解决方案1】：

是的，这是可能的！与setCustomValidity。

您只需要获取您的输入元素（通过回调或 document.getElementBy...）并调用

element.setCustomValidity('message here')

如果输入有效，则可以调用

element.setCustomValidity('')

清除错误信息。

例如：

<input name='email' onchange='checkEmail(this)'></input>

然后定义 checkEmail...

function checkEmail(element) {
    ajaxCallToServer(element.value, function callback(hypotheticalResponse) {
        if (hypotheticalResponse.isOk) {
            element.setCustomValidity('');
        } else {
            element.setCustomValidity('Sorry that email is already taken!');
        }
    });
}

【讨论】：

【解决方案2】：

不，HTML5 验证没有函数概念。它原则上与语言无关，甚至不假定浏览器支持 JavaScript。它仅支持 HTML5 规范中描述的检查。

【讨论】：