input/text的maxlength在JS修改值后提交验证失效的技术问询

Let's break down your questions one by one—this is a super common point of confusion with HTML form validation, and it all boils down to how different attributes are designed to behave:

1. The Core Difference Between maxlength and number's max #

The key lies in what each attribute is meant to enforce:

• maxlength is a user input-focused constraint: its only job is to limit how much text a user can manually type into an input. It doesn't check the length when the value is set via code (like the value attribute or JavaScript) because the spec assumes developers have a valid reason for setting longer content (e.g., displaying pre-existing data from a database that was originally longer than the current limit).
• number's max (and min) are value-range constraints: they exist to ensure the input's value falls within a valid range, no matter how that value was set. Whether the user types it, you pre-set it via value, or modify it with JS, the value must comply with the range when the form is submitted—this aligns with common use cases for numeric inputs (like age limits or quantity ranges where invalid values should never be submitted).

2. Why This Design Choice? #

This goes back to HTML's original form design goals:

• maxlength was added to improve user experience by preventing accidental over-typing, not to act as a strict backend validation rule. Developers often need to display longer text in input fields (e.g., editing a saved note that exceeded the current limit) without blocking the form from being submitted.
• Numeric and date inputs, by contrast, are almost always tied to strict business rules. Allowing invalid values (even set via code) would break those rules, so the spec enforces validation on submit regardless of how the value was set.

3. Can We Fix This Without JavaScript? #

Absolutely! You can use the pattern attribute to enforce a length limit that validates on submit, even for pre-set or JS-modified values. Here's an example:

<form action="#">
  <!-- ^.{0,5}$ allows empty values; use ^.{1,5}$ if you want required + length limit -->
  <input type="text" maxlength="5" pattern="^.{0,5}$" value="Longer than 5 chars" title="Max 5 characters allowed">
  <input type="submit">
</form>

The pattern attribute uses a regular expression to check the input's final value when the form is submitted, no matter how the value was modified. The title attribute adds a helpful tooltip when validation fails.

4. Which Other Attributes Have This Behavior? #

Here's a quick breakdown of similar validation rules:

• Only validates on user input:
  • minlength: Same as maxlength—doesn't enforce length for pre-set/JS-modified values on submit.
• Validates on submit regardless of value source:
  • number/range inputs: max, min, step
  • date/datetime-local/month inputs: max, min
  • pattern: Validates format for any value, whether user-set or code-set
  • required: Ensures the input isn't empty, no matter how the value was set

5. The JS-Appended Character Scenario #

When you use JavaScript to append characters beyond maxlength, the form still won't trigger native validation—this is consistent with maxlength's design. The pattern workaround above fixes this, as it checks the final value when the form is submitted, regardless of how it was modified.

While this inconsistency can be frustrating, it's a trade-off between developer flexibility (allowing code-set values to bypass input-length limits) and strict validation (for value ranges/format).

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