Using HTML5's pattern attribute allows for convenient front-end input verification without JavaScript. 1. The basic usage is to write regular expressions into the pattern attribute of the input tag to limit the content of the text-class input box; 2. Regular expressions should be added with ^ and $ to ensure full match and avoid misjudgment; 3. It can provide clearer prompt information with the title attribute, but the mobile side may not display it; 4. Common application scenarios include verification of mobile phone numbers, postal codes, passwords, license plate numbers, etc., but back-end verification is still required to ensure data security.

Using HTML5's pattern attribute for input verification is actually quite convenient, especially when JavaScript is not required. As long as you write the regular expression correctly, the browser can automatically help you determine whether the user input meets the requirements.

1. Basic usage: directly add it to the input tag

pattern is an HTML5 property, usually used on the <input> tag, especially the text class input boxes such as type="text" , "email" , and "password" . Its value is a regular expression that tells the browser what this input should look like.

To give the simplest example, if you want the user to only enter letters (such as username):

 <input type="text" pattern="[A-Za-z] ">

In this way, if the user enters a number or symbol, the browser will prompt an error when submitting the form.

It should be noted that pattern only triggers verification when form is submitted and will not remind users in real time.

2. The regular writing method is very particular and cannot be copied casually

There are a few things to pay attention to when writing rules:

• The browser defaults to partial matching, which means that the regular you write will automatically match part of the input content. If you do not add ^ and $ , misjudgment may occur.
• Therefore, it is generally recommended to add start and end tags to ensure that the entire string complies with the rules.

For example, if you want to limit the input, you must be 6 digits:

 <input type="text" pattern="^\d{6}$">

If you do not add ^ and $ , as long as there are 6 digits in the middle, even if you pass, for example, enter "abc123456def" will be accepted. This is not the effect you want.

3. Cooperate with title prompts to improve user experience

Although the browser will pop up an error message, that message is usually fixed in English and may not necessarily be customized. To make the user more clear about what is wrong, you can use it with title attribute:

 <input type="text" pattern="^\d{6}$" title="Please enter 6 digits">

This way, the prompt message will be displayed when the mouse is hovering, helping the user understand the input rules.

However, it should be noted that some browsers do not automatically display title prompts, especially on mobile devices, so this is just an auxiliary means and cannot be completely relied on.

4. Common application scenarios and regular examples

The following are some common input verification scenarios and corresponding regular expressions, which can be used directly:

• Mobile phone number (China) :

   <input type="text" pattern="^1[3-9]\d{9}$" title="Please enter the mobile phone number in mainland China">

• Postal code (6 digits) :

   <input type="text" pattern="^\d{6}$" title="Please enter 6 digit postal code">

• Password (at least 8 digits, including letters and numbers) :

   <input type="password" pattern="(?=.*\d)(?=.*[a-zA-Z]).{8,}" title="Password at least 8 digits, containing letters and numbers">

• License plate number (simplified) :

   <input type="text" pattern="^[Beijing, Tianjin, Shanghai, Chongqing, Hebei, Henan, Yunnan, Liaoning, Hunan, Anhui, Shandong, New Jiangsu, Zhejiang, Jiangxi, Hubei, Guizhou, Gansu, Shanxi, Mongolia, Shaanxi, Ji, Fujian, Guizhou, Qinghai, Tibet, Sichuan, Ningqiong Envoy AZ]{1}[AZ]{1}[A-Z0-9]{5}$" title="Please enter the correct license plate number">

  These rules can meet most front-end verification needs, but don’t forget that the back-end also needs to perform verification, after all, front-end verification can be bypassed.

  Basically that's it. Using pattern attribute well can save a lot of trouble, but you can't rely too much on it. Only by reasonably combining prompt information and back-end verification can the accuracy of the input data be ensured.

  The above is the detailed content of Using the HTML5 `pattern` attribute for input validation regex.. For more information, please follow other related articles on the PHP Chinese website!