一、简概

因为，前端经常涉及到表单验证，故此篇博客用于记录前端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位。
  • 邮箱：符合邮箱的规则(xxx+@xx+.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 = /^\w+@\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标记，是最后对表单form的submit事件进行判定，只有当以上三个全部返回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 = /^\w+@\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>

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

待续


博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：https://chemlez.github.io/2020/08/27/%E5%89%8D%E7%AB%AF%E4%B9%8B%E8%A1%A8%E5%8D%95%E9%AA%8C%E8%AF%81/

相关文章

Comment