如何在表单提交之前检查 html 输入元素的最小值

Question

我希望在表单提交事件之前对 html 输入元素执行输入验证，例如最小值。 （因为我正在实现一个工作流程，并且在按下/执行提交时，要验证的元素不再可见）。

我尝试过使用 onBlur，但如果按下另一个按钮，它不会被触发/执行。

我尝试过使用 onChange 和 onKeyPress，但对于输入的每个数字，它们被触发得太频繁，而且我无法确定何时必须实际验证该值。 （当输入多位数的第一位数字时，新值低于最小值，但验证失败没有意义，因为用户在不久的将来仍可能输入更多数字。但另一方面，不失败假设他将输入更多数字，这是不确定的，有时也不能确定，因此验证不失败将允许一个低于最小值的值）。

:-)

Answer 1

看来至少就我而言， 在捕获阶段添加 onClick 处理程序， 允许在嵌套按钮单击处理之前拦截单击处理， 显示错误消息并设置 focus ，防止将事件传播到按钮的单击处理程序。

示例代码：

function handleClick(event)
{
    // skip processing of the target was not actually a button.
    if ('form' in event.target === false) return;

    // validate all elements
    for (let Index=0;Index < event.target.form.elements.length;Index++)
    {
       let IsValid = event.target.form.elements[Index].checkValidity();

       if (!IsValid)
       {
        event.target.form.elements[Index].reportValidity();

        // form is invalid - cancel submit
        event.preventDefault();  
        event.nativeEvent.stopImmediatePropagation();
               
       }

    }
  }

.
.
 <form onClickCapture={(e) => handleClick(e)} >

您还可以在 event.target.form.elements[Index].validityState 中浏览具体失效类型。 还可以使用 event.target.form.elements[Index].setCustomValidity(...) 设置您自己的错误消息