如何修改Chrome中input框minlength属性的默认错误提示？

嘿，这个需求我刚好折腾过！要替换Chrome默认的minlength验证提示，咱们可以用HTML5表单验证API里的setCustomValidity()方法来搞定，具体有两种常用方式：

方式一：直接在HTML中绑定事件 #

这种方式适合简单场景，直接在input标签里添加事件处理：

<input type="text" minlength="10" placeholder="Submit" class="dataSubmit" 
       oninvalid="this.setCustomValidity('More data required')"
       oninput="this.setCustomValidity('')" />

• oninvalid：当输入内容不满足minlength规则时触发，设置我们自定义的提示文本
• oninput：用户输入时重置提示内容，不然就算输入满足长度了，之前的自定义提示还会卡住验证流程

方式二：纯JavaScript绑定事件（更优雅） #

如果你的项目更注重代码分离，推荐用这种方式：

// 获取目标input元素
const submitInput = document.querySelector('.dataSubmit');

// 监听验证失败事件
submitInput.addEventListener('invalid', function(e) {
  e.preventDefault(); // 阻止浏览器默认提示先弹出
  this.setCustomValidity('More data required');
});

// 监听输入事件，重置提示
submitInput.addEventListener('input', function() {
  this.setCustomValidity(''); // 清除自定义提示，确保合法时能正常提交
});

这样设置后，当用户输入内容长度不足10字符尝试提交时，就会显示你想要的「More data required」提示，完全替换掉Chrome的默认文本啦～

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