“This is the first day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021”

Form validation

The validation done here is only local validation, not backend related (if user input is incorrect, the front page prompts changes and prevents the backend from sending data). Therefore, form validation on the front end is only used to prompt the user.

The onblur event occurs when the focus is lost

We use regular expressions

In form validation, using regular expressions to verify correctness is a very frequent operation. This article has collected 15 commonly used javaScript regular expressions. These include user name, password strength, integer, digit, E-mail address (Email), mobile phone number, ID number, URL address, IPv4 address, hexadecimal color, date, QQ number, wechat signal, license plate number, and Chinese regular.

1 The user name is regular

Var uPattern = /^[a-za-z0-9_ -]{4,16}$/; var uPattern = /^[A-za-z0-9_ -]{4,16}$/; // print true console.log(upattern.test ("caibaojian"));Copy the code

2 Password strength is regular

The password must contain at least six characters, including at least one uppercase letter, one lowercase letter, one digit, and one special character. Var pPattern = /^.*(? (=. {6})? =.*d)(? =.*[A-Z])(? =.*[a-z])(? =. * [! @ # $% ^ & *?] ). * $/; // Output true console.log("=="+ ppattern.test ("caibaojian#"));Copy the code

3 Integer regularization

Var posPattern = /^d+$/; Var negPattern = /^-d+$/; Var intPattern = /^-? d+$/; // Output true console.log(pospattern.test ("42")); // Print true console.log(negpattern.test ("-42")); // Print true console.log(intpattern.test ("-42"));Copy the code

4 Digital regularization

They can be integers or floating-point numbers

Var posPattern = /^d*.? d+$/; Var negPattern = /^-d*.? d+$/; Var numPattern = /^-? d*.? d+$/; The console. The log (posPattern. Test (" 42.2 ")); The console. The log (negPattern. Test (" 42.2 ")); The console. The log (numPattern. Test (" 42.2 "));Copy the code

5 Email regular

Regular var ePattern = / / Email / ^ ([- Za - z0-9 _ -. "]) + @ ([A - Za - z0-9 _ -.]) +. ([A Za - z] {2, 4}) $/; // Print true console.log(epattern.test ("[email protected]"));Copy the code

6 The mobile phone number is regular

Var mPattern = /^1[34578]d{9}$/; / / http://caibaojian.com/regexp-example.html / / output true on the console. The log (mPattern. Test (" 15507621888 "));Copy the code

7 Id number is regular

/ / id number (18) regular var cP = / ^ {5} [1-9] d (18 19 | | ([23] d)) d {2} ((0 [1-9]) | (10, 11 | | 12)) (([0-2] [1-9]) 10 20 | | | | 30 31) d {3} [xx] 0-9 $/; // Output true console.log(cp.test ("11010519880605371X"));Copy the code

8 the URL regular

Var urlP= /^((HTTPS? |ftp|file)://)? ([da - z -] +). ([a-z.] {2, 6}) (*) [/ w. -] * /? $/; // Print true console.log(urlp.test ("http://caibaojian.com"));Copy the code

9 The IPv4 address is regular

Var ipP = /^(? : (? : 25 [0 to 5] | 2 [0 to 4] [0-9] | [01]? [0-9] [0-9]?) .). {3} (? : 25 [0 to 5] | 2 [0 to 4] [0-9] | [01]? [0-9] [0-9]?) $/; // Print true console.log(ipp.test ("115.28.47.26"));Copy the code

10 Hexadecimal color is regular

Var cPattern = /^#? ([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/; // Print true console.log(cpattern.test ("#b8b8b8"));Copy the code

11 Date regularization

/ date/regular, simple decision, do not make month and date of var dP1 = {4} / ^ d (-) d {1, 2} {1, 2} $1 d /; // Print true console.log(dp1.test ("2017-05-11")); // Output true console.log(dp1.test ("2017-15-11")); Var dP2 = /^(? : (? ! 0000) [0-9] {4} - (? : (? : 0 | [1-9] [0-2] 1) - (? : 0 [1-9] [0-9] | | 1 2 [0 to 8]) | (? : 0 [9] 13 - | [0-2] 1) - (? 30) : 29 | | (? : 0 [13578] 1 [02]) - 31) | | (? : [0-9] {2} (? : 0 [48] | [2468] [048] | [13579] [26]) | (? : 0 [48] | [2468] [048] | [13579] [26]) 00) - 02-29) $/; // Output true console.log(dp2.test ("2021-02-11")); // Print false console.log(dp2.test ("2021-15-11")); // Print false console.log(dp2.test ("2021-02-29"));Copy the code

12 QQ number is regular

/ / QQ number regular, 5 to 11 var qqPattern = / ^ (1-9] [0-9] {4, 10} $/; // Output true console.log(qqPattern. Test ("65974040"));Copy the code

13 micro signal is regular

Var wxPattern = /^[a-za-z]([-_a-za-z0-9]{5,19})+$/; // Print true console.log(wxpattern.test ("caibaojian_com"));Copy the code

14. The license plate number is regular

[a-z]{1}[a-z]{1}[A-z]{1}[A-z0-9]{4}[A-z0-9 hang student police Hong Kong and Macao]{1}$/; // Output true console.log(cpattern.test (" jin A66666"));Copy the code

15 Contains Chinese regulars

Var cnPattern = /[u4e00-u9fa5]; // print true console.log(cnpattern.test ("中文"));Copy the code