一、简概

因为,前端经常涉及到表单验证,故此篇博客用于记录前端JS对表单验证的方法。

通过表单验证,当对form表单提交时,可以防止不合法的数据传递至后台(以及判空操作)。这里我们先定义一个表单,作为示例,其它的情况都可以此类推。

示例表单

前端表单代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div>
<form method="get" action="https://www.baidu.com" id="form">
<table align="center" style="margin: 0 auto;">
<tr>
<td><label>用户名</label></td>
<td><input type="text" name="username" placeholder="请输入用户名" style="width: 150px" id="username"></td>
</tr>
<tr>
<td><label>邮箱</label></td>
<td><input type="email" name="email" placeholder="请输入邮箱" style="width: 150px" id="email"></td>
</tr>
<tr>
<td><label>性别</label></td>
<td align="left">
<input type="radio" name="male" value="male" checked>
<input type="radio" name="female" value="female">
</td>
</tr>
<tr>
<td><label>出生日期</label></td>
<td><input type="date" name="birthday" style="width: 150px" id="birthday"></td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" name="register" value="注册" style="margin-top: 5px">
</td>
</tr>
</table>
</form>
</div>

前端进行表单验证只需作用在两个地方即可:

  1. 绑定当前需要验证的input标签的离焦事件。

  2. form表单的submit进行全部的input标签判定

    当结果全部返回true才能进行提交,否则无法提交。

二、代码

2.1 单个标签的离焦事件

  • 用户名:限制用户名的长度为3~10位。
  • 邮箱:符合邮箱的规则([email protected]+.xx+)其中的+号代表正则的通配符。
  • 出生日期:非空即可。
1.用户名

username绑定离焦事件 – 采用JS的方式

1
2
3
4
5
6
7
8
9
10
11
12
13
function checkusername() {
var username = $('#username');
var value = username.val();
var regex = /^\w{3,10}$/; //用户名长度3-10
var flag = regex.test(value);
if (flag) { // 如果验证通过
username.css('border', '');
} else { // 如果验证不通过
username.css('border', '2px solid red'); // 验证不通过输入框显示红色
}
return flag;
}
$('#username').blur(checkusername); // 对username绑定离焦事件,触发checkusername函数

示例:

当对用户名输入不合法时,输入框会报红:

报错信息

符合规定时:

2.邮箱

同理,只要写出正确的正则表达式即可。

1
2
3
4
5
6
7
8
9
10
11
12
    function checkemail() {
var val = $('#email').val();
var regx = /^\[email protected]\w+\.\w+$/; // 邮箱的验证规则
var flag = regx.test(val);
if (flag) {
$('#email').css('border', '');
} else {
$('#email').css('border', '2px solid red')
}
return flag
}
$('#email').blur(checkemail);
3.出生日期 非空

非空的正则表达式:var regex = /\S/;

1
2
3
4
5
6
7
8
9
10
11
12
13
    function checkbirthday() {
var birthday = $('#birthday');
var value = birthday.val();
var regex = /\S/; // 非空验证
var flag = regex.test(value);
if (flag) { // 如果验证通过
birthday.css('border', '');
} else { // 如果验证不通过
birthday.css('border', '2px solid red');
}
return flag;
}
$('#birthday').blur(checkbirthday);

注意:以上所有的函数返回flag标记,是最后对表单formsubmit事件进行判定,只有当以上三个全部返回true时,那么表单才能够进行提交。

2.2 表单提交的验证

1
2
3
4
// 当submit接收false时不提交,接收true时才进行提交
$('#form').submit(function () {
return checkemail() && checkusername() && checkbirthday();
});

2.3 全部代码

前端全部代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单验证</title>
<script src="js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="css/注册样式.css"/>
<style>

div {
padding-top: 200px;
margin: 0 auto;
text-align: center;

}

</style>
</head>
<body>

<div>
<form method="get" action="https://www.baidu.com" id="form">
<table align="center" style="margin: 0 auto;">
<tr>
<td><label>用户名</label></td>
<td><input type="text" name="username" placeholder="请输入用户名" style="width: 150px" id="username"></td>
</tr>
<tr>
<td><label>邮箱</label></td>
<td><input type="email" name="email" placeholder="请输入邮箱" style="width: 150px" id="email"></td>
</tr>
<tr>
<td><label>性别</label></td>
<td align="left">
<input type="radio" name="male" value="male" checked>男
<input type="radio" name="female" value="female">女
</td>
</tr>
<tr>
<td><label>出生日期</label></td>
<td><input type="date" name="birthday" style="width: 150px" id="birthday"></td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" name="register" value="注册" style="margin-top: 5px">
</td>
</tr>
</table>
</form>
</div>

<script>

function checkusername() {
var username = $('#username');
var value = username.val();
var regex = /^\w{3,10}$/; //用户名长度3-10
var flag = regex.test(value);
if (flag) { // 如果验证通过
username.css('border', '');
} else { // 如果验证不通过
username.css('border', '2px solid red'); // 验证不通过输入框显示红色
}
return flag;
}


function checkemail() {
var val = $('#email').val();
var regx = /^\[email protected]\w+\.\w+$/;
var flag = regx.test(val);
if (flag) {
$('#email').css('border', '');
} else {
$('#email').css('border', '2px solid red')
}
return flag

}


function checkbirthday() {
var birthday = $('#birthday');
var value = birthday.val();
var regex = /\S/; // 非空验证
var flag = regex.test(value);
if (flag) { // 如果验证通过
birthday.css('border', '');
} else { // 如果验证不通过
birthday.css('border', '2px solid red');
}
return flag;
}


$('#email').blur(checkemail);
$('#birthday').blur(checkbirthday);
$('#username').blur(checkusername);


$('#form').submit(function () {
return checkemail() && checkusername() && checkbirthday();
});

</script>
</body>
</html>

三、附 常用表单验证的正则表达式

待续


Comment