How do you use the pattern attribute for input validation in HTML5?
The pattern attribute in HTML5 is used to specify a regular expression that the input value must match to be valid, and it works with input types like text, tel, email, url, and password; 1. It enforces custom text formatting directly in the browser without JavaScript by validating the entire input value against the regex when the form is submitted; 2. Common use cases include validating a username with letters and numbers using pattern="[a-zA-Z0-9]{4,10}", a US phone number with pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}", a password with specific rules like pattern="(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,}" and a license plate format such as ABC-123 using pattern="[A-Z]{3}-[0-9]{3}"; 3. Key points include that the pattern must match the entire input implicitly, it should be paired with a descriptive title attribute to guide users, and client-side validation should always be backed up with server-side validation; 4. Limitations include lack of support for input type number, where min, max, and step should be used instead, and the need to thoroughly test regex to avoid overly strict or loose validation, making pattern a powerful tool for guiding correct user input directly in the browser.
The pattern attribute in HTML5 is used to specify a regular expression that the input value must match in order to be considered valid. It's a powerful way to enforce custom text formatting directly in the browser without JavaScript.
You apply the pattern attribute to an <input> element, and it works with input types like text, tel, email, url, and password. When a form is submitted, the browser checks if the input value matches the given regex pattern. If it doesn't, the browser shows a validation message and prevents form submission.
How to Use the Pattern Attribute
Here’s a basic example:
<form>
<label for="username">Username (letters and numbers only, 4–10 characters):</label>
<input
type="text"
id="username"
name="username"
pattern="[a-zA-Z0-9]{4,10}"
required
>
<button type="submit">Submit</button>
</form>In this case:
- The input must contain only letters and numbers.
- It must be between 4 and 10 characters long.
- The
requiredattribute ensures the field isn’t left empty.
Common Use Cases and Examples
1. Phone Number (US Format)
<input
type="tel"
name="phone"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
placeholder="123-456-7890"
required
>This expects a format like 123-456-7890. Note: This doesn't validate real phone numbers but enforces structure.
2. Password with Specific Rules
<input
type="password"
name="pwd"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Must contain at least one number, one uppercase letter, one lowercase letter, and be at least 8 characters long"
required
>Important: The title attribute is useful here because the browser will display it as a hint when validation fails.
3. Vehicle License Plate (e.g., ABC-123)
<input
type="text"
name="plate"
pattern="[A-Z]{3}-[0-9]{3}"
title="Format: AAA-123"
required
>Key Points to Remember
- The pattern must match the entire input value (implicit anchors — no need to wrap with
^and$, though you can). - It only applies when the form is submitted or when validity is checked.
- Always pair
patternwith a descriptivetitleso users understand what’s expected. - Never rely solely on client-side validation — always validate on the server too.
Limitations and Tips
- Not all input types support
pattern(e.g.,numberhasmin,max,stepinstead). - For
numberinputs, avoid usingpattern; usemin,max, andstepattributes. - Test your regex thoroughly — small mistakes can make validation too strict or too loose.
Basically, pattern gives you fine-grained control over text input formats using regex, making it easy to guide users toward correct data entry right in the browser.
The above is the detailed content of How do you use the pattern attribute for input validation in HTML5?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Integrating CSS and JavaScript effectively with HTML5 structure.
Jul 12, 2025 am 03:01 AM
HTML5, CSS and JavaScript should be efficiently combined with semantic tags, reasonable loading order and decoupling design. 1. Use HTML5 semantic tags, such as improving structural clarity and maintainability, which is conducive to SEO and barrier-free access; 2. CSS should be placed in, use external files and split by module to avoid inline styles and delayed loading problems; 3. JavaScript is recommended to be introduced in front, and use defer or async to load asynchronously to avoid blocking rendering; 4. Reduce strong dependence between the three, drive behavior through data-* attributes and class name control status, and improve collaboration efficiency through unified naming specifications. These methods can effectively optimize page performance and collaborate with teams.
Explaining the HTML5 `` vs `` elements.
Jul 12, 2025 am 03:09 AM
It is a block-level element, suitable for layout; it is an inline element, suitable for wrapping text content. 1. Exclusively occupy a line, width, height and margins can be set, which are often used in structural layout; 2. No line breaks, the size is determined by the content, and is suitable for local text styles or dynamic operations; 3. When choosing, it should be judged based on whether the content needs independent space; 4. It cannot be nested and is not suitable for layout; 5. Priority is given to the use of semantic labels to improve structural clarity and accessibility.
Understanding HTML5 Media Source Extensions (MSE)
Jul 08, 2025 am 02:31 AM
MSE (MediaSourceExtensions) is part of the W3C standard, allowing JavaScript to dynamically build media streams, thus enabling advanced video playback capabilities. It manages media sources through MediaSource, stores data from SourceBuffer, and represents the buffering time range through TimeRanges, allowing the browser to dynamically load and decode video clips. The process of using MSE includes: ① Create a MediaSource instance; ② Bind it to an element; ③ Add SourceBuffer to receive data in a specific format; ④ Get segmented data through fetch() and append it to the buffer. Common precautions include: ① Format compatibility issues; ② Time stamp pair
What are the new input types available in HTML5 forms?
Jul 12, 2025 am 03:07 AM
HTML5introducednewinputtypesthatenhanceformfunctionalityanduserexperiencebyimprovingvalidation,UI,andmobilekeyboardlayouts.1.emailvalidatesemailaddressesandsupportsmultipleentries.2.urlchecksforvalidwebaddressesandtriggersURL-optimizedkeyboards.3.num
How to access user's current location with the HTML5 Geolocation API?
Jul 13, 2025 am 02:23 AM
To get the user's current location, use the HTML5 GeolocationAPI. This API provides information such as latitude and longitude after user authorization. The core method is getCurrentPosition(), which requires successful and error callbacks to be handled; at the same time, pay attention to the HTTPS prerequisite, user authorization mechanism and error code processing. ① Call getCurrentPosition to get the position once, and an error callback will be triggered if it fails; ② The user must authorize it, otherwise it cannot be obtained and may no longer be prompted; ③ Error processing should distinguish between rejection, timeout, location unavailable, etc.; ④ Enable high-precision, set timeout time, etc., and can be configured through the third parameter; ⑤ The online environment must use HTTPS, otherwise it may be restricted by the browser.
Submitting Form Data Using New HTML5 Methods (FormData)
Jul 08, 2025 am 02:28 AM
It is more convenient to submit form data using HTML5's FormData API. 1. It can automatically collect form fields with name attribute or manually add data; 2. It supports submission in multipart/form-data format through fetch or XMLHttpRequest, which is suitable for file upload; 3. When processing files, you only need to append the file to FormData and send a request; 4. Note that the same name field will be overwritten, and JSON conversion and no nesting structure need to be handled.
Displaying progress bars with the HTML5 `` tag.
Jul 08, 2025 am 02:24 AM
HTML5 tags can directly implement web page progress bars. 1. The basic usage is to set the value and max attributes, such as displaying 30% progress; 2. If the progress is unknown, the value can be omitted and only set max, which means an uncertain state; 3. You can customize the style through CSS, and browser compatibility needs to be handled; 4. It is often used in scenarios such as uploading files, form progress, and game loading; 5. Pay attention to avoid using it when the task is completed too quickly, and consider the compatibility issues of the old version of IE.
Explain the `async` and `defer` attributes for scripts in HTML5.
Jul 13, 2025 am 03:06 AM
The difference between async and defer is the execution timing of the script. async allows scripts to be downloaded in parallel and executed immediately after downloading, without guaranteeing the execution order; defer executes scripts in order after HTML parsing is completed. Both avoid blocking HTML parsing. Using async is suitable for standalone scripts such as analyzing code; defer is suitable for scenarios where you need to access the DOM or rely on other scripts.
