具有自定义验证功能的基本HTML5表单。如果提交的值不是数字，则浏览器应显示错误消息“字段必须是数字”。如果输入“ abc”并按提交（或按Enter键），则该字段将标记为无效，但不会出现错误消息。再按一次提交（或按Enter键），它将显示该消息。这种双重提交行为出现在Windows和OS X的最新版本的Firefox，Chrome，Safari和IE上。您会注意到，默认的“此字段为必填...”消息出现在首次提交时，并且不显示奇怪的行为。
顺便说一句，我很清楚，这种验证在IE的较旧版本中将不起作用，并且输入字段可以具有一种number可以自动完成此验证的类型。这是我的问题的简化示例，仅用于演示目的。
Javscript
var form = document.getElementById("form");
var field = document.getElementById("field");
form.onsubmit = validateForm;
function validateForm() {
if(isNaN(field.value)) {
field.setCustomValidity("Field must be a number.");
} else {
return true;
}
return false;
}
的HTML
<form id="form">
<label for="field">Favorite number</label>
<input type="text" id="field" required>
<input type="submit">
</form>
设置有效性消息后，您需要调用element.reportValidity()使其显示。
setCustomValidity(message)设置自定义错误消息字符串，以在提交表单时显示给用户，解释为什么值无效—设置消息时，有效性状态设置为无效。要清除此状态，请使用传递为参数的空字符串来调用该函数。在这种情况下，将清除自定义错误消息，该元素被视为有效，并且不显示任何消息。
reportValidity()根据其约束检查元素的值，并报告有效性状态；如果值无效，则它将在元素上引发无效事件，返回false，然后以用户代理可用的任何方式向用户报告有效性状态。否则，它返回true。
event.preventDefault()每当输入无效时，您还需要在表单提交事件上使用，以使表单提交不会通过。
这是一个例子：
var form = document.getElementById('form');
var field = document.getElementById('field');
form.onsubmit = validateForm;
/* this is the function that actually marks the field as valid or invalid */
function validateForm(event) {
if (isNaN(field.value)) {
field.setCustomValidity('Field must be a number.');
field.reportValidity();
event.preventDefault();
}
field.setCustomValidity('');
}<form id="form">
<label for="field">Favorite number</label>
<input type="text" id="field" required />
<input type="submit" />
</form>您也可以使用HTML5模式属性在不使用JavaScript的情况下进行大多数表单验证，或者使用JavaScript进行扩展以设置自定义错误消息。
模式：检查控件值的正则表达式。模式必须与整个值匹配，而不仅仅是某些子集。使用title属性描述模式以帮助用户。当type属性的值是text，search，tel，url或email时，此属性适用。否则将被忽略。正则表达式语言与JavaScript相同。图案不被正斜杠包围。
<form id="form">
<label for="field">Favorite number</label>
<input type="text" id="field" pattern="\d*" title="Field must be a number." required />
<input type="submit" />
</form>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句