警告：客户端验证是有用的，但它并不能保证服务器会收到有效的数据。如果数据必须是特定的格式，总是应该在服务器端进行验证，如果格式无效，则返回一个 400 HTTP 响应。
除了如上文 UI 伪类部分所述，使用 CSS 根据 :valid 或 :invalid 每个输入的当前状态来设计输入的样式之外，浏览器还在（试图）提交表单时提供了客户端验证。在表单提交时，如果有一个表单控件没有通过约束验证，支持的浏览器将在第一个无效的表单控件上显示一个错误信息；根据错误类型显示一个默认信息，或者由你设置的信息。
某些输入类型和其他属性对特定输入的有效值进行了限制。例如， 意味着只有数字 2、4、6、8 或 10 有效。某些错误可能发生，当值小于 2 时会发生 rangeUnderflow 错误，值大于 10 时会发生 rangeOverflow 错误，当值在 2 至 10 之间，但不是偶数（不满足 step 属性的需求）时会发生 stepMismatch 错误，如果值不是一个数字时会发生 typeMismatch 错误。
对于可能的值域是周期性的输入类型（也就是说，在可能的最高值时，值会绕回开始而不是结束），max 和 min 属性的值有可能是相反的，这表明允许的值范围从 min 开始，绕到可能的最低值，然后继续下去直到达到 max。这对日期和时间特别有用，比如你想让范围从晚上 8 点到早上 8 点：
html特定的属性和它们的值会导致一个特定的错误 ValidityState：
Validity 对象的错误取决于 的属性及其值： 属性 相关属性 描述 max validityState.rangeOverflow 当值大于 max 属性所定义的最大值时发生 maxlength validityState.tooLong 当字符数大于 maxlength 属性所允许的数量时发生 min validityState.rangeUnderflow 当值小于 min 属性所定义的最小值时发生 minlength validityState.tooShort 当字符数小于 minlength 属性所允许的数量时发生 pattern validityState.patternMismatch 当模式属性包含一个有效的正则表达式，而 value 与之不匹配时发生 required validityState.valueMissing 当 required 存在时，但是值为 null 或单选钮、复选框未选中时发生 step validityState.stepMismatch 值不满足步进增量。增量默认值为 1，所以对于 type="number" 来说，只有整数才有效，step="any" 永远不会抛出这个错误。 type validityState.typeMismatch 当值的类型不正确时发生，例如，电子邮件不包含 @，或者不包含协议的 url。如果一个表单控件没有 required 属性，没有值，或者是一个空字符串，都不是无效的。即使上述属性存在，除了 required 之外，和空字符串也不会导致错误。
我们可以对接受的值进行限制，支持的浏览器会对这些表单的数值进行原生验证，并在表单提交时提醒用户是否有错误。
除了上表中描述的错误外，validityState 接口还包含 badInput、valid 和 customError 布尔值只读属性。有效性对象包括：
validityState.valueMissing validityState.typeMismatch validityState.patternMismatch validityState.tooLong validityState.tooShort validityState.rangeUnderflow validityState.rangeOverflow validityState.stepMismatch validityState.badInput validityState.valid validityState.customError对于这些布尔属性中的每一个，值为 true 表示指定的验证可能失败的原因是真实的，但 valid 属性除外，如果元素的值服从所有的约束，则为 true。
如果有错误，支持的浏览器会提醒用户，并阻止表单的提交。需要注意的是：如果自定义错误被设置为一个真值（除了空字符串或 null 以外的任何值），表单将被阻止提交。如果没有自定义错误信息，并且其他属性都没有返回真值，那么 valid 将为真，表单可以被提交。
jsfunction validate(input) { let validityState_object = input.validity; if (validityState_object.valueMissing) { input.setCustomValidity("需要一个值"); } else if (validityState_object.rangeUnderflow) { input.setCustomValidity("值太小了"); } else if (validityState_object.rangeOverflow) { input.setCustomValidity("值太大了"); } else { input.setCustomValidity(""); }}最后一行，将自定义的有效性信息设置为空字符串是至关重要的。如果用户出错，而有效性被设置，即使所有的值都是有效的，也会提交失败，直到消息为 null。
自定义验证错误示例如果你想在一个字段验证失败时显示一个自定义的错误信息，你需要使用约束验证 API，在 （及相关）元素上可用。以下面的表格为例：
html 输入用户名（允许使用大小写字母）： 提交如果你试图提交的表单没有填写有效的内容，或者是一个不符合 pattern 的值，基本的 HTML 表单验证功能将使其产生一个默认的错误信息。
如果你想转而显示自定义的错误信息，你可以使用下面这样的 JavaScript 代码：
jsconst nameInput = document.querySelector("input");nameInput.addEventListener("input", () => { nameInput.setCustomValidity(""); nameInput.checkValidity();});nameInput.addEventListener("invalid", () => { if (nameInput.value === "") { nameInput.setCustomValidity("输入一个用户名！"); } else { nameInput.setCustomValidity("用户名只能包含大写或小写字母，请再试一遍。"); }});此示例会像这样渲染：
简单来说：
每次输入元素的值发生变化时，我们通过 input 事件处理程序运行 checkValidity() 方法来检查其有效状态。 如果值是无效的，会引发 invalid 事件，运行 invalid 事件处理函数。在这个函数中，我们使用 if() 块来决定值无效是因为它是空的，还是因为它不符合模式，并设置一个自定义的有效性错误信息。 因此，如果在按下提交按钮时，输入值是无效的，将显示其中一个自定义错误信息。 如果它是有效的，它就会像你所期望的那样提交。要做到这一点，必须取消自定义的有效性，通过使用空字符串调用 setCustomValidity() 来实现。我们在每次 input 事件发生时都要这样做。如果你不这样做，并且之前设置了一个自定义的有效性，那么输入将会认为无效，即使它目前包含一个有效的提交值。备注：始终在客户端和服务器端验证输入约束。约束验证并不能消除在服务器端进行验证的必要性。无效的值仍然可以由旧的浏览器或坏的行为者发送。
备注：Firefox 在许多版本中支持一个专有的错误属性——x-moz-errormessage，它允许你以类似的方式设置自定义错误信息。从第 66 版开始，这个属性已被移除（见Firefox bug 1513890）。