关于javascript:用神奇的-form-验证-API-来优化你的表单验证

作者：陈大鱼头

github：KRISACHAN

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

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

每一个原生的表单组件都会有一个用于形容元素的验证状态的对象 —— 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`。

当表单元素验证正确时则返回 ''，否则则返回默认或者经由 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>

一个只读属性，当表单元素须要验证时返回 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() 用于设置表单元素 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() 用于查看以后表单元素或整个表单的值是否通过验证，如果是则为 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() 用于触发以及查看表单元素的值是否通过验证，如果是则为 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

咱们看成果：

代码如下：

<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 不暴露出款式批改的属性。。。

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

关于javascript:用神奇的-form-验证-API-来优化你的表单验证

前言

相干的 API

ValidityState

validationMessage

willValidate

setCustomValidity()

checkValidity()

reportValidity()

一个简略的 form 提交例子

参考资料