Всем привет, в своем первом посте на Medium я хочу показать вам, как создать простой измеритель надежности пароля в React.js. Итак, давайте начнем.
Прежде всего, нам нужно определить, какую проверку мы будем использовать, в этом случае мы будем проверять 4 вещи:
- Пароль должен содержать заглавные буквы.
- Пароль должен содержать строчные буквы.
- Пароль должен иметь число.
- Пароль должен быть не менее 8 символов.
Первый шаг: объявление переменной состояния
На первом этапе мы объявим переменную состояния. В этом случае мы инициализируем пароль и валидируем .
Второй шаг: создание функции-дескриптора
Далее мы создадим функцию для изменения и проверки пароля.
Как вы знаете, мы уже определили проверку, есть 4 условия, которые нам нужно проверить, если какое-либо условие выполняется, мы пометим значение как true в определенном элементе объекта.
После этого нам нужно добавить новый const strength в качестве значения индикатора выполнения.
Третий шаг: создание макета
А затем создайте макет для ввода пароля, панели надежности и обратной связи.
Последний шаг: добавьте стиль CSS
Немного CSS не повредит, верно?
И, наконец, наш индикатор надежности пароля выглядит так….
Я надеюсь, что этот пост даст вам представление о том, как создать надежный пароль. Не стесняйтесь играть и модифицировать его, есть много возможностей для улучшения.
Хорошо, это все люди. Увидимся в другой раз.
Источник: https://gist.github.com/iyurisko/ddff7022e203328a743a94ec4bc6f23b
