HTML5输入验证功能而不是模式

Question

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

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

Answer 1

是的，这是可能的！随着setCustomValidity。

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

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!');
        }
    });
}

Answer 2

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