如何通过oninvalid显示两种不同警告提示？现有代码失效求助

原代码的问题点 #

• 同一个input标签重复定义了oninvalid属性，HTML中重复属性会以后续定义的为准，导致第一个校验逻辑完全失效。
• pattern属性里的正则多了首尾的/，正确写法应该直接写正则表达式内容，不需要额外包裹。
• 缺少校验通过后的提示重置逻辑，一旦触发过自定义提示，后续即使输入符合要求，浏览器仍会判定校验不通过。

修复后的代码 #

<input type="text"
  id="usr" 
  name="usr"
  placeholder="学号"
  pattern="^[0-9]+.?[0-9]*$"
  required
  oninvalid="
    if (!this.validity.valid) {
      if (this.validity.valueMissing) {
        this.setCustomValidity('请输入学号');
      } else if (this.validity.patternMismatch) {
        this.setCustomValidity('请输入数字');
      }
    }
  "
  oninput="this.setCustomValidity('')"
>

代码说明 #

• 合并oninvalid事件处理逻辑，通过validity属性判断具体校验失败类型：
  • valueMissing对应required属性的空值校验失败
  • patternMismatch对应pattern属性的格式校验失败
• 修正pattern属性，去掉多余的/，确保正则能正确匹配整数或小数格式的数字
• 添加oninput事件，用户输入时清空自定义提示，保证后续校验能正常触发

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