React受控输入minLength验证失效允许表单提交问题咨询

• 该现象本质是React受控组件和原生HTML表单校验逻辑的兼容问题，核心触发条件是：原生表单的minLength、maxLength这类长度校验规则，仅对**被原生DOM标记为「已交互（dirty）」**的输入框生效，也就是输入框的值是由用户主动输入修改的，才会在表单提交时触发校验。
• 非受控组件没有绑定value属性，输入框的值完全由原生DOM自主管理，用户输入的内容会直接修改原生DOM存储的值，会被正确标记为已交互状态，因此提交时minLength校验正常生效，可阻止不符合规则的提交。
• 受控组件的值完全由React state接管：用户输入时首先触发onChange回调，手动更新state后再通过props将新值传入输入框，这种由React主动写入的数值变更，不会被原生DOM识别为用户的主动输入行为，输入框始终处于未交互的初始状态，提交时原生校验会直接跳过minLength规则的检查，因此表单可以正常提交。

• 手动加提交校验：在表单onSubmit逻辑中先判断绑定的content状态的长度是否符合要求，不符合就终止后续提交逻辑，这是React受控组件最常用的校验实现方式。
• 要继续使用原生校验的话，可以通过useRef拿到输入框的DOM实例，在提交前手动调用checkValidity()方法触发原生校验，根据返回结果判断是否允许提交即可。

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