前端常见的正则校验规则

前端常见的正则校验规则 1 <script>
2/**
3 * 表单的校验
4 * 1. ⽤户名：单词字符，8-20位长度
5 * 2. 密码：数字字符， 8-20位长度
6 * 3. email:邮件格式
7 * 4. 姓名：⾮空
8 * 5. ⼿机号：⼿机号格式
9*/
10//校验⽤户名
11//⽤户名：单词字符，8-20位长度
12function checkUserName() {
13//1.获取⽤户名值
14var username = $("#username").val();
15//2.定义正则
16var reg_username = /^\w{8,20}$/;
17//3.判断，给出提⽰信息
18var flag = reg_username.test(username);
19if (flag) {
20//⽤户名合法
21 $("#username").css("border","");
22 } else {
23//⽤户名⾮法,加红⾊的边框
24 $("#username").css("border", "1px solid red");
25 }
26return flag;
27 }
28//校验密码
29function checkPassword() {
30var password = $("#password").val();
31var reg_password = /^\w{8,20}$/;
32var flag = reg_password.test(password);
33if (flag) {
34 $("#password").css("border","");
35 } else {
36 $("#password").css("border", "1px solid red");
37 }
38return flag;
39 }
40//校验email
41function checkEmail(){
42//1.获取⽤户邮箱
43var email = $("#email").val();
44 const reg_Email = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
45var flag=reg_Email.test(email);
46if (flag) {
47//密码合法
48 $("#email").css("border","");
49 } else {
50//密码⾮法,加红⾊的边框
51 console.log(flag);
52 $("#email").css("border", "1px solid red");
53 }
54return flag;
55 }
56//校验电话号码
57function checkPhone(){
58var phone = $("#telephone").val();
59var reg_tele= /^[1][3,4,5,7,8][0-9]{9}$/;
60var flag=reg_tele.test(phone);
61if (flag) {
62 $("#telephone").css("border","");
63 } else {
64 console.log(flag);
65 $("#telephone").css("border", "1px solid red");
66 }
67return flag;
68
69 }
70//校验姓名
71function checkName(){
72var name = $("#name").val();
73var reg_name= /^\S{2,5}$/;
74var flag=reg_name.test(name);
75if (flag){
76 $("#name").css("border","1px solid red");
77 }else {
78 $("#name").css("border","");
79 }
80 }
81//调⽤验证规则
82 $(function () {
83//当表单提交时调⽤所有的校验⽅法
84 $("#registerForm").submit(function () {
85//调⽤⽅法
86return checkUserName() && checkPassword() && checkEmail() && checkPhone() && checkName(); 87//如果匿名的⽅法没有返回值，或者返回值为true时，则表单提交，如果返回false，则表单不提交
88 })
89//当某⼀个组件失去焦点时，调⽤对应的校验⽅法
90//此处传递的是function对象，不要加括号
91 $("#username").blur(checkUserName);
92 $("#password").blur(checkPassword);
93 $("#email").blur(checkEmail);
94 $("#telephone").blur(checkPhone);
95 $("#name").blur(checkName);
96 })
97
98 </script>。