RegExp/password.html at main · DmitrMarch/RegExp · GitHub

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
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Проверка пароля</title>
    <script src="validatePassword.js"></script>
</head>
<body style="font-family: sans-serif, serif;">
    <form style="margin: auto; width: 550px; height: 430px; text-align: center;
        margin-top: 100px; border-radius: 10px; box-shadow: 1px 1px 1px 1px;"
        id="passForm">
        <input style="width: 300px; height: 30px; border-radius: 10px; padding-left: 10px;
            padding-right: 10px; margin-bottom: 30px; margin-top: 50px;"
            placeholder="пароль..." id="passInp">
        <h3>
            Ограничения на пароль:
        </h3>
        <ol style="text-align: left; width: 490px;" id="restrictions">
            <li>
                Пароль должен содержать только латинские символы, цифры и специальные символы ^$%@#&*!?
            </li>
            <li>
                Пароль должен состоять из не менее чем восьми символов
            </li>
            <li>
                Пароль должен содержать по крайней мере один латинский символ в верхнем регистре
            </li>
            <li>
                Пароль должен содержать по крайней мере один латинский символ в нижнем регистре
            </li>
            <li>
                Пароль должен содержать по крайней мере одну цифру
            </li>
            <li>
                Пароль должен содержать по крайней мере два различных специальных символа
            </li>
            <li>
                Пароль не должен содержать двух одинаковых символов подряд
            </li>
        </ol>
    </form>
    <script>
        const RED_COLOR = "#EE204D";
        const GREEN_COLOR = "#44944A";

        let pass_inp = passForm.passInp;
        pass_inp.addEventListener("input", () => {

            let restrictions = document.getElementById("restrictions").children;

            if (pass_inp.value == "") {

                pass_inp.style.background = "";

                for (let i = 0; i < restrictions.length; ++i) {

                    restrictions[i].style.color = "";
                }

                return;
            }

            let pass = pass_inp.value;
            // pass = "#2345@Aa" //подходящий пароль
            // pass = "@2345@Aa" //неподходящий пароль
            let pass_status = getPasswordStatus(pass);

            if (pass_status.reduce((sum, a) => sum + a, 0) == 7) {

                pass_inp.style.background = GREEN_COLOR;

                for (let i = 0; i < restrictions.length; ++i) {

                    restrictions[i].style.color = GREEN_COLOR;
                }

                return;
            }

            pass_inp.style.background = RED_COLOR;

            for (let i = 0; i < restrictions.length; ++i) {

                let text_color = RED_COLOR;

                if (pass_status[i]) text_color = GREEN_COLOR;

                restrictions[i].style.color = text_color;
            }
        })
    </script>
</body>
</html>