我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

html5下的各种input表单控件，自身就带着合法性验证的手段，并且有着统一的验证结果界面和报错信息。但是，验证结果界面挺难看的，还不能更改样式。所以，苏南大叔并不是推荐这种验证方法，没啥意义。表单自定义验证的方式方法很多，效果都比自带的这个好。

苏南大叔：HTML5，input表单验证的方式方法，如何自定义错误信息？ - input表单验证
HTML5，input表单验证的方式方法，如何自定义错误信息？（图3-1）

苏南大叔的“程序如此灵动”博客，记录苏南大叔的代码编程经验总结。本文测试环境：chrome@131.0.6778.205。前端合法性验证就是个效果而已，千万别当真，不要相信任何前端数据，后台该做的验证步骤一步都不能少。前端数据验证做的效果再好，它提交到后台的数据也都是不可信的。

验证相关属性

这个input的合法性验证，核心设置有两个：

  • required，必填项。
  • pattern，正则表达式。

例如：

<input type="text" pattern="^\d{3,8}$" required="required" />
HTML

苏南大叔：HTML5，input表单验证的方式方法，如何自定义错误信息？ - 验证方式
HTML5，input表单验证的方式方法，如何自定义错误信息？（图3-2）

.validity 属性

查看input的.validity属性，会发现很多结果可能性。返回的对象(validityState)包含以下属性：

苏南大叔：HTML5，input表单验证的方式方法，如何自定义错误信息？ - input的属性
HTML5，input表单验证的方式方法，如何自定义错误信息？（图3-3）

名称说明
badInput输入值是否符合预期的数据类型
customError是否存在自定义错误，存在自定义错误返回true
patternMismatch输入值与pattern中的正则表达式是否匹配，不匹配返回false
rangeOverflow输入值有max属性的约束，且输入的value大于max时，就返回true
rangeUnderflow输入值有min属性的约束，且输入的value大于min时，就返回true
stepMismatch输入的值符不符合step特性相关（max/min/step）所推算出的规则。
tooLong输入值是否超过了元素maxlength属性所建立的最大单元长度，不超过返回false
tooShort输入值是否小于元素minlength属性所建立的最小单元长度，不小于返回false
typeMismatch输入的值是否符合元素type属性设置的约束，例如 email或url类型
valid当字段通过验证的时候，返回true
valueMissing当必填的字段是空的时候，返回true

自定义错误

<form action="#" method="post">
  <input type="number" id="num" pattern="^\d{3,8}$" required="required" />
  <input
    type="text"
    id="email"
    maxlength="5"
    minlength="3"
    pattern="^[A-Za-z]+$"
    required="required"
  />
  <input type="submit" id="button" value="提交" />
</form>
<script>
  window.onload = function () {
    let num = document.getElementById("num");
    let email = document.getElementById("email");
    let button = document.getElementById("button");
    button.onclick = function () {
      var v = num.validity;
      if (v.valueMissing === true) {
        num.setCustomValidity("输入不能空！");
      } else if (v.patternMismatch === true) {
        num.setCustomValidity("请输入2-5位数字！");
      } else {
        num.setCustomValidity("");
      }
      var v2 = email.validity;
      if (v2.valueMissing === true) {
        email.setCustomValidity("输入不能空！");
      } else if (v2.tooLong === true) {
        email.setCustomValidity("太长了");
      } else if (v2.tooShort === true) {
        email.setCustomValidity("太短了");
      } else if (v.patternMismatch === true) {
        num.setCustomValidity("正则匹配失败！");
      } else if (v2.typeMismatch === true) {
        email.setCustomValidity("请输入正确的email！");
      } else {
        email.setCustomValidity("");
      }
    };
  };
</script>
HTML

结语

并不推荐使用本文中所涉及的表单输入合法性验证的代码，仅作了解，遇到再补充。

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   h5