Oracle Apex中如何让自定义验证优先于系统默认验证执行？

核心思路是：保留日期选择器的min/max属性做UI层面的选择限制，同时通过setCustomValidity()方法覆盖浏览器默认的错误提示，而不是依赖额外的自定义验证规则（因为默认验证会优先触发并阻断后续逻辑）。

具体实现步骤：

• 保留日期字段的min和max设置，这会让日期选择器只显示允许范围内的日期，减少无效输入
• 给日期输入框绑定input或change事件，在用户选择/输入日期时手动校验，并设置自定义错误提示
• 当日期符合范围时，清空错误提示；不符合时，设置你需要的精准提示

举个原生JS的实现示例：

<!-- 保留min/max属性做UI限制 -->
<input type="date" id="targetDate" min="2015-03-11" max="2022-03-11" required>
<button type="submit">提交</button>

<script>
const dateInput = document.getElementById('targetDate');
// 从input属性中获取预设的最小/最大日期
const allowedMin = new Date(dateInput.min);
const allowedMax = new Date(dateInput.max);

dateInput.addEventListener('input', function() {
  const selected = new Date(this.value);
  let customMsg = '';
  
  if (selected < allowedMin) {
    customMsg = '所选日期不能早于2015年3月11日';
  } else if (selected > allowedMax) {
    customMsg = '所选日期不能晚于2022年3月11日';
  }
  
  // 覆盖浏览器默认提示
  this.setCustomValidity(customMsg);
});
</script>

为什么之前的自定义验证不生效？ #

浏览器的原生表单验证（包括min/max规则）是优先执行的，一旦验证失败，会直接显示默认提示，并且不会触发你后续添加的自定义验证逻辑。而setCustomValidity()是直接修改该字段的验证错误信息，相当于替换了默认提示，同时保留了UI上的范围限制。

如果是用Vue、React这类框架，思路也一致：

• 保留日期组件的min/max属性限制选择范围
• 在输入/变更事件中手动校验日期，然后通过框架的表单验证API（比如Vue的自定义表单规则、React Hook Form的register自定义校验）设置自定义提示，或者直接操作DOM元素的setCustomValidity方法。

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