HTML5与jQuery表单验证：初始值超maxlength提交无警告问题咨询

我懂你的困扰：从数据库加载的初始值明明超过了maxlength="6"的限制，但用户没做任何修改直接提交时，HTML5的验证居然没触发，表单直接就提交了对吧？这是因为HTML5的maxlength属性只限制用户输入时的长度，不会自动校验页面加载时就存在的超长值，而且你写的pattern="{0,6}"是错误的正则格式，所以完全没生效。下面给你两种靠谱的解决方案：

方案一：纯HTML5实现验证 #

1. 修正pattern属性 #

首先把pattern改成正确的正则表达式，用来匹配0到6个任意字符，同时加上title属性给出友好的错误提示：

<form id="checkValues" method="post">
  <input 
    id="reading01" 
    name="reading01" 
    type="text" 
    required 
    class="form-control" 
    maxlength="6" 
    value="12345678" 
    pattern="^.{0,6}$"
    title="输入内容不能超过6个字符"
  >
  <button class="btn btn-primary" type="submit">Update</button>
</form>

2. 页面加载后手动触发初始校验 #

光改pattern还不够，因为HTML5默认不会在页面加载时校验初始值，所以需要加一点JS代码，在页面加载完成后主动检查这个输入框的有效性：

window.addEventListener('load', function() {
  const readingInput = document.getElementById('reading01');
  // 检查输入值是否符合验证规则
  if (!readingInput.checkValidity()) {
    // 触发HTML5原生的验证提示
    readingInput.reportValidity();
  }
  
  // 额外给表单加submit事件监听，确保提交时一定会校验
  document.getElementById('checkValues').addEventListener('submit', function(e) {
    if (!readingInput.checkValidity()) {
      e.preventDefault(); // 阻止表单提交
      readingInput.reportValidity(); // 显示错误提示
    }
  });
});

方案二：用jQuery Validate插件实现（修正你的错误用法） #

你之前的jQuery Validate用法完全错了，这个插件是要初始化在form元素上，而不是单个input。下面是正确的实现步骤：

1. 确保引入依赖脚本 #

如果还没引入，要先把jQuery和jQuery Validate的脚本加在页面里（比如放在body末尾）：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

2. 正确初始化表单验证 #

$(window).on("load", function() {
  // 在form元素上调用validate方法
  $("#checkValues").validate({
    rules: {
      reading01: {
        required: true,
        maxlength: 6 // 限制最大长度为6
      }
    },
    messages: {
      reading01: {
        required: "这个字段不能为空",
        maxlength: "输入内容不能超过6个字符"
      }
    },
    // 页面加载完成后就触发一次校验，检查初始值
    onload: function() {
      $("#reading01").valid();
    }
  });
});

这样配置后，不管用户有没有修改输入值，提交时都会触发校验，而且页面加载时也会自动检查初始值是否符合规则，不符合的话会直接显示错误提示。

另外要注意：这两种方案都不会自动截断超长字符，只会提示用户手动修改，完全符合你的需求。

内容的提问来源于stack exchange，提问作者DaveP