Скачать или смотреть How to Limit User Input to a Specific Pattern in HTML Using RegEx

Learn how to implement a pattern that restricts user input in an HTML form to a specific year range while including formatting like dashes.
---
This video is based on the question https://stackoverflow.com/q/75000622/ asked by the user 'Justin' ( https://stackoverflow.com/u/20924032/ ) and on the answer https://stackoverflow.com/a/75000675/ provided by the user 'technophyle' ( https://stackoverflow.com/u/3930247/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Is there a pattern to limit the first four numbers in my input box?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Limit User Input to a Specific Pattern in HTML Using RegEx

When creating input forms for your website, it's crucial to ensure that the data captured is valid and matches certain criteria. A common requirement is to limit user input to a specific format or range. For instance, if you need to capture a code in the format of a year followed by a sequence number, you may face challenges in enforcing these constraints effectively.

The Problem

Suppose you want to create an input field where users can only enter codes like 2018-00130. The first four numbers should represent the year and must be limited to a range between 2010 and 2022. However, using standard input types like number would not allow you to include a dash (-) in the input format.

Specific Requirements

The year must be between 2010 and 2022.

The format should adhere to YYYY-XXXXX, where YYYY is the year, and XXXXX is a five-digit number.

The input must prevent characters that fall out of these constraints.

The Solution

One effective way to enforce this pattern is to use the pattern attribute in an <input> tag along with a regular expression (RegEx). RegEx allows you to specify the exact criteria for valid input.

Implementation Steps

Here’s how you can implement it in your HTML form:

Define the HTML Form:
You need to create a form with an input field where users can enter their codes.

Use the Pattern Attribute:
The pattern attribute will use RegEx to restrict the input format.

Here’s the complete code:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Pattern

In the pattern 20(1[0-9]|2[0-2])-[0-9]{5}:

20: Indicates that the year starts with '20'.

(1[0-9]|2[0-2]):

This portion checks that the next digit is either '1' followed by any digit (which gives you the years 2010-2019) or '2' followed by '0', '1', or '2' (which gives you 2020, 2021, and 2022).

-: Specifies that a dash must follow the year.

[0-9]{5}: Ensures the next five characters are digits, which allows for any five-digit sequence.

Additional Attributes

maxlength="10": Limits the total input length to 10 characters, including the year, dash, and digit sequence.

required: Ensures that the field cannot be left empty when submitting the form.

Conclusion

Using the right combination of HTML input attributes and RegEx, you can effectively limit user input to specific formats and ranges. The provided solution enables enforceable constraints while allowing users to enter well-defined data formats easily.

By following the steps outlined above, you'll enhance the data integrity of your web forms, keeping inputs structured and within the desired bounds.