HTML5，input表单验证的方式方法，如何自定义错误信息？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

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

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

验证相关属性

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

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

例如：

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

.validity 属性

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

自定义错误

<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>

结语

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

• https://newsn.net/tag/h5/

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