onKeyup事件触发后input的minlength属性失效，求解决方案

问题原因 #

当通过onKeyup事件脚本修改input值时，浏览器内置的表单验证（包括minlength）不会自动触发，导致长度验证失效。

解决方案 #

方案1：改用input事件+pattern属性（推荐）

使用input事件替代keyup（覆盖粘贴、输入法输入等更多场景），同时添加pattern属性强制验证格式，确保输入内容是可选负号+6位数字，配合minlength、maxlength完成双重限制：

<label for="prenum">preNumber</label>
<input 
  type="text" 
  class="form-control" 
  id="prenum" 
  onInput="this.value=this.value.replace(/[^-0-9]/g,'');"
  pattern="^-?\d{6}$"
  minlength="6" 
  maxlength="6" 
  required
>

• input事件：在输入值发生任何变化时触发，比keyup覆盖场景更全面；
• pattern="^-?\d{6}$"：正则验证输入内容为可选负号开头，后跟6位数字；
• maxlength="6"：限制输入框最多输入6个字符，减少无效输入；
• 表单提交时，浏览器会自动验证minlength、pattern和required规则，验证不通过会弹出对应提示。

方案2：手动触发验证逻辑

如果坚持使用keyup事件，可以在修改值后调用checkValidity()方法强制浏览器重新执行验证：

<label for="prenum">preNumber</label>
<input 
  type="text" 
  class="form-control" 
  id="prenum" 
  onKeyup="
    this.value=this.value.replace(/[^-0-9]/g,'');
    this.checkValidity();
  "
  minlength="6" 
  maxlength="6" 
  required
>

调用checkValidity()会触发浏览器内置验证流程，此时minlength规则会正常生效。

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