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

时间:2014-12-23 16:49:34

标签: html html5 forms validation

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

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

2 个答案:

答案 0 :(得分:3)

是的,这是可能的!使用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!');
        }
    });
}

答案 1 :(得分:1)

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