• 作者：陈大鱼头
  • github： KRISACHAN

前言

鱼头曾在 『极限版』不掺水，用纯 CSS 来实现超飒的表单验证性能 一文中分享过一个花里胡哨的 纯 CSS 的表单验证性能 。尽管仅仅依赖 CSS 是无奈满足咱们的日常开发需要的，然而配合着各种原生的 form 验证 API ，状况又不一样了。

上面就让咱们来理解一下 。

相干的 API

ValidityState

每一个原生的表单组件都会有一个用于形容元素的验证状态的对象 —— ValidityState 。

代码如下：

账号：<input data-title="账号" placeholder="请输出正确的账号" pattern="\w{6,10}" name="account" type="text" required  id="input-text" /><script>  'use strict';  const inputText = document.querySelector('#input-text');  inputText.addEventListener('input', event => {    console.table(inputText.validity);  });</script>

输入如下：

具体属性如下：

属性可选值阐明
valueMissing（只读）true / false当表单元素设置了 required 属性，且 value 为空时则为 true ，否则为 false 。此属性关联伪类 :valid / :invalid 。
typeMismatch（只读）true / false当表单元素输出的值与类型不匹配时为 true ，否则为 false 。此属性关联伪类 :valid / :invalid 。
patternMismatch（只读）true / false当表单元素输出的值与 pattern 属性的规定不匹配时为 true ，否则为 false 。此属性关联伪类 :valid / :invalid 。
tooLong（只读）true / false当表单元素输出的值长度超过 maxlength 属性时 为 true ，否则为 false 。此属性关联伪类 :valid / :invalid 。
tooShort（只读）true / false当表单元素输出的值长度少于 minlength 属性时 为 true ，否则为 false 。此属性关联伪类 :valid / :invalid 以及 :in-range / :out-of-range 。
rangeUnderflow（只读）true / false当表单元素输出的值少于 min 属性时 为 true ，否则为 false 。此属性关联伪类 :valid / :invalid 以及 :in-range / :out-of-range 。
rangeOverflow（只读）true / false当表单元素输出的值大于 max 属性时 为 true ，否则为 false 。此属性关联伪类 :valid / :invalid 以及 :in-range / :out-of-range 。
stepMismatch（只读）true / false当表单元素输出的值与 step 的值不匹配 时为 true ，否则为 false 。此属性关联伪类 :valid / :invalid 以及 :in-range / :out-of-range 。
badInput（只读）true / false当表单元素输出的值不残缺且 UA 认为以后状态的表单不应该被提交时为 true，否则为 false。
customError（只读）true / false当表单元素的错误信息是由 setCustomValidity() 办法调用展现时为 true，否则为 false。
valid（只读）true / false当表单元素验证通过时为 true ，否则为 false 。此属性关联伪类 :valid / :invalid 。

validationMessage

当表单元素验证正确时则返回 ''，否则则返回默认或者经由setCustomValidity() 办法设置的错误信息。

成果如下：

代码如下：

账号：<input data-title="账号" placeholder="请输出正确的账号" pattern="\w{6,10}" name="account" type="text" required  id="input-text" /><script>    'use strict';    const inputText = document.querySelector('#input-text');    inputText.addEventListener('input', event => {      console.table(inputText.validationMessage); // 验证谬误时则返回 “请与所申请的格局保持一致。”    });</script>

willValidate

一个只读属性，当表单元素须要验证时返回 true ，否则则为 false 。

成果如下：

代码如下：

账号：<input data-title="账号" placeholder="请输出正确的账号" pattern="\w{6,10}" name="account" type="text" required  id="input-text" /><script>    'use strict';    const inputText = document.querySelector('#input-text');    inputText.addEventListener('input', event => {      console.table(inputText.willValidate); // true    });</script>

setCustomValidity()

setCustomValidity() 用于设置表单元素 validationMessage 的值。当设置 setCustomValidity() 之后，validity.customError 就会变成 true 。如果须要重置，则输出空字符串即可。

咱们看看效果图：

代码如下：

<form class="form" id="form" method="get" action="/api/form">      账号：    <input id="account" data-title="账号" placeholder="请输出正确的账号" pattern="\w{6,10}" name="account" type="text" required />    <input id="submit" name="button" type="submit" value="提交" /></form><script>    'use strict';    account.setCustomValidity('自定义谬误！');    form.addEventListener('submit', event => {          event.preventDefault();    });</script>

checkValidity()

checkValidity() 用于查看以后表单元素或整个表单的值是否通过验证，如果是则为 true，否则则为 false 。

成果如下：

代码如下：

账号：<input data-title="账号" placeholder="请输出正确的账号" pattern="\w{6,10}" name="account" type="text" required  id="input-text" /><script>    'use strict';    const inputText = document.querySelector('#input-text');    inputText.addEventListener('input', event => {          console.table(inputText.checkValidity());    });</script>

reportValidity()

reportValidity() 用于触发以及查看表单元素的值是否通过验证，如果是则为 true，否则则为 false 。

成果如下：

代码如下：

账号：<input data-title="账号" placeholder="请输出正确的账号" pattern="\w{6,10}" name="account" type="text" required  id="input-text" /><script>    'use strict';    const inputText = document.querySelector('#input-text');    console.log(inputText.reportValidity());</script>

以上 API 兼容性如下：

图片来自：https://caniuse.com/constraint-validation

一个简略的 form 提交例子

咱们看成果：

代码如下：

<style>    .form > input {          margin-bottom: 10px;    }</style><form class="form" id="form" method="get" action="/api/form">    账号：    <input id="account" data-message="请输出正确的账号" data-title="账号" placeholder="请输出正确的账号" pattern="\w{6,10}" name="account" type="text" required />    <br />    明码：    <input id="password" data-message="请输出正确的明码" data-title="明码" placeholder="请输出正确的明码" pattern="\w{6,10}" name="password" type="password" required />    <br />    <input id="submit" name="button" type="submit" value="提交" /></form><script>  'use strict';  const inputs = [account, password];  inputs.forEach(input => {      input.addEventListener('input', () => {          input.setCustomValidity('');          input.checkValidity();      });      input.addEventListener('invalid', event => {          const { message } = event.target.dataset;          const { validity: { valid } } = input;          input.setCustomValidity('');          if (!valid) {                input.setCustomValidity(message);          };      });  });</script>

以上例子能够在鱼头的 Codepen ：https://codepen.io/krischan77/pen/RwGLaxa 上查看。

鱼头注：Mmmmm，性能倒是挺好的，如果不是原生的组件款式太丑，不同浏览器的体现不统一，而且款式还不能批改，我想用原生 API 开发的人应该会很多。。。搞不懂为啥 W3C 不暴露出款式批改的属性。。。

参考资料

  1. 『极限版』不掺水，用纯 CSS 来实现超飒的表单验证性能
  2. 『真香正告』这33个超级好用的CSS选择器，你可能见都没见过。
  3. form-control-infrastructure
  4. ValidityState
  5. HTMLFormElement
  6. Constraint validation API