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

Question

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

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

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