Привет Кодер! Добро пожаловать в блог codewithrandom. В этой статье мы покажем вам, как выполнить проверку формы входа с помощью JavaScript. Прочитав этот блог, вы сможете получить представление о том, как использовать HTML, CSS и JavaScript для разработки простой формы входа с проверкой.
Проверка формы входа с помощью JavaScript[/caption]
Перед созданием формы входа с проверкой необходимо ознакомиться с концепцией проверки.
Как создать валидацию формы входа с помощью JavaScript
Процесс проверки HTML-формы включает в себя определение того, являются ли адрес электронной почты, имя пользователя и пароль пользователя верными и правильными. Прежде чем пользователь сможет получить доступ к зарезервированной странице, необходимо ввести действительное имя пользователя и пароль.
Пользователи могут получить доступ к определенной системе, идентифицируя и аутентифицируя себя с помощью форм входа. Давайте рассмотрим процесс, который я использовал для создания этой формы входа шаг за шагом.
Шаг 1: Структура формы входа
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Login Form </title>
</head>
<body>
<div class="login-page">
<div class="form">
<form class="login-form " action="https://www.instagram.com/codewith_random/" target="_blank">
<h2>SIGN IN TO YOUR ACCOUNT</h2>
<input type="text" required placeholder="Username" id="user" autocomplete="off" />
<input oninput="return formvalid()" type="password" required placeholder="Password" id="pass"
autocomplete="off" />
<img src="https://cdn2.iconfinder.com/data/icons/basic-ui-interface-v-2/32/hide-512.png"
onclick="show()" id="showimg">
<span id="vaild-pass"></span>
<button type="submit">SIGN IN</button>
<p class="message"><a href="#">Forgot your password?</a></p>
</form>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
Чтобы поддерживать хорошее управление кодом, мы будем создавать три отдельных файла в нашем редакторе кода для HTML, CSS и Javascript. Наша форма входа будет состоять из HTML, CSS и Javascript. Теперь давайте добавим функции CSS и JavaScript на наш сайт. Ссылки для JavaScript и CSS должны быть включены в наш HTML.
<link rel="stylesheet" href="style.css"> <script src="index.js"></script>
Теперь добавим структуру формы. Нам нужно создать div с классом (login-page), который будет основным контейнером для нашего логина. Теперь, чтобы создать форму, нам нужно использовать тег ‹form›. Теперь мы добавим заголовок для нашей формы входа, используя тег ‹h2›. Форма входа в основном состоит из трех элементов «ввода»: текстового поля для имени пользователя, поля пароля для пароля и кнопки типа «отправить» для создания кнопки входа.
Чтобы добавить к нашему паролю функцию скрытия/отображения, мы будем использовать изображение глаза. Все понимают ценность запоминания паролей, но что произойдет, если кто-то забудет пароль для входа? Итак, с помощью тега ‹a› мы свяжем забывание паролей.
Вывод:
Шаг 2: Оформление формы входа
Наш сайт можно сделать более красочным, используя CSS. Таблицу стилей можно вставить тремя различными способами. Включив свойства CSS и свойство стиля в соответствующий элемент, вы можете использовать встроенный CSS. Если нет, вы можете использовать внутренний CSS, который используется в элементе style› и разделе head›. Другой вариант — создать внешний файл CSS с суффиксом .css и сослаться на него в разделе заголовка HTML-файла. При создании веб-страницы рекомендуется использовать внешний файл CSS.
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,500;0,600;0,700;1,100;1,200;1,300&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background: #6a62d2;
}
.login-page {
height: 100vh;
width: 100%;
align-items: center;
display: flex;
justify-content: center;
}
.form {
position: relative;
filter: drop-shadow(0 0 2px #000000);
border-radius: 5px;
width: 360px;
height: 420px;
background-color: #ffffff;
padding: 40px;
}
.form img {
position: absolute;
height: 20px;
top: 230px;
right: 60px;
cursor: pointer;
}
.form input {
outline: 0;
background: #f2f2f2;
border-radius: 4px;
width: 100%;
border: 0;
margin: 15px 0;
padding: 15px;
font-size: 14px;
}
.form input:focus {
box-shadow: 0 0 5px 0 rgba(106, 98, 210);
}
span {
color: red;
margin: 10px 0;
font-size: 14px;
}
.form button {
outline: 0;
background: #6a62d2;
width: 100%;
border: 0;
margin-top: 10px;
border-radius: 3px;
padding: 15px;
color: #ffffff;
font-size: 15px;
-webkit-transition: all 0.3 ease;
transition: all 0.4s ease-in-out;
cursor: pointer;
}
.form button:hover,
.form button:active,
.form button:focus {
background: black;
color: #fff;
}
.message {
margin: 15px 0;
text-align: center;
}
.form .message a {
font-size: 14px;
color: #6a62d2;
text-decoration: none;
}
Базовый стиль для нашей веб-страницы:
Во-первых, мы будем использовать ссылку импорта для нашего CSS, чтобы добавить шрифты Poppins. Наша форма входа использует этот шрифт. Отступы и поля теперь установлены на «0» с помощью универсального селектора, а размер окна изменен на «граница». Мы установим шрифт «Poppins» для всей нашей веб-страницы, используя атрибут font-family.
Мы можем добавить фон к телу веб-страницы, используя свойство background. Цвет фона нашей веб-страницы можно установить по-разному, используя прямые имена, затем используя шестнадцатеричные коды и т. д.
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,500;0,600;0,700;1,100;1,200;1,300&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background: #6a62d2;
}
Стиль контейнера страницы входа:
Мы изменим стиль нашей страницы входа, добавив селектор класса (.login-page). Ширина и высота установлены на 100% и 100vh соответственно. Мы центрируем все объекты, используя атрибут align-item. Мы можем легко расположить все элементы, установив для атрибута display значение flex.
.login-page {
height: 100vh;
width: 100%;
align-items: center;
display: flex;
justify-content: center;
}
Форма входа в систему:
Положение контейнера формы задается относительным с помощью селектора класса (.form). Относительно контейнера страницы входа. Свойство border-radius будет использоваться для придания нашей форме кривых. Мы установим ширину и высоту на «360 пикселей» и «420 пикселей» соответственно, используя атрибуты ширины и высоты. Используя свойство background, фон устанавливается белым.
.form {
position: relative;
filter: drop-shadow(0 0 2px #000000);
border-radius: 5px;
width: 360px;
height: 420px;
background-color: #ffffff;
padding: 40px;
}
Стили элементов формы (ввод и кнопка):
Изображение, которое мы добавили в форму, сначала будет стилизовано. Используя тег img, мы можем настроить наше изображение. Расположение изображения установлено на «абсолютное». Он имеет высоту 20 пикселей. Используя атрибут top, наша иконка с глазом теперь будет располагаться на 230 пикселей сверху и на 36 пикселей справа.
Используя тег ввода, мы можем стилизовать наши поля ввода. Фон имеет грязно-белый цвет. Ширина поля ввода установлена на 100%. Кроме того, мы дали нашему входному тегу отступ и отступ в 15 пикселей. Текст между областями ввода имеет размер шрифта 14px.
Тень блока будет формироваться вокруг поля ввода, когда пользователь установил свойство фокуса в поле ввода.
.form img {
position: absolute;
height: 20px;
top: 230px;
right: 60px;
cursor: pointer;
}
.form input {
outline: 0;
background: #f2f2f2;
border-radius: 4px;
width: 100%;
border: 0;
margin: 15px 0;
padding: 15px;
font-size: 14px;
}
.form input:focus {
box-shadow: 0 0 5px 0 rgba(106, 98, 210);
}
Теперь мы стилизуем кнопку и гиперссылку для забытого пароля. Мы установим синий фон нашей кнопки, используя свойство background. Ширина нашей кнопки установлена на 100%. Используя свойство margin-top, у нас будет верхнее поле «10px». Размер шрифта и цвет шрифта 15 пикселей и белый цвет нашего шрифта.
Теперь нашему сообщению о забытом пароле дается отступ в 15 пикселей с помощью селектора класса (.message). Мы центрируем текст, используя атрибут text-align.
.form button {
outline: 0;
background: #6a62d2;
width: 100%;
border: 0;
margin-top: 10px;
border-radius: 3px;
padding: 15px;
color: #ffffff;
font-size: 15px;
-webkit-transition: all 0.3 ease;
transition: all 0.4s ease-in-out;
cursor: pointer;
}
.form button:hover,
.form button:active,
.form button:focus {
background: black;
color: #fff;
}
.message {
margin: 15px 0;
text-align: center;
}
.form .message a {
font-size: 14px;
color: #6a62d2;
text-decoration: none;
}
Проверка формы входа с помощью JavaScript[/caption]
Шаг 3: Код JavaScript для страницы входа с именем пользователя и паролем: -
//TODO : Its a Completed Code
function formvalid() {
var vaildpass = document.getElementById("pass").value;
if (vaildpass.length <= 8 || vaildpass.length >= 20) {
document.getElementById("vaild-pass").innerHTML = "Minimum 8 characters";
return false;
} else {
document.getElementById("vaild-pass").innerHTML = "";
}
}
Чтобы включить функциональность для проверки формы. Будет создана функция с именем formvalid(). Мы определим переменную validpass в нашем коде. Мы выберем ввод пароля с помощью функции документа getelementById.
Мы отобразим уведомление о том, что пароль содержит менее 8 символов, если длина пароля меньше 8 символов или больше 20 символов с использованием условного оператора.
Шаг 4: Показать/скрыть функциональность
function show() {
var x = document.getElementById("pass");
if (x.type === "password") {
x.type = "text";
document.getElementById("showimg").src =
"https://static.thenounproject.com/png/777494-200.png";
} else {
x.type = "password";
document.getElementById("showimg").src =
"https://cdn2.iconfinder.com/data/icons/basic-ui-interface-v-2/32/hide-512.png";
}
}
Мы назначим наш ввод пароля, используя документ внутри процедуры с именем display(). getElementById() Теперь мы проверим равенство значения переменной со строкой «пароль», используя условие и документ. Значение нашего ввода с типом пароля изменится на тип текста, когда мы используем метод src для преобразования изображения в открытый глаз. Изображение переключится с открытого глаза на закрытый, если мы установим x.type = password в другом предложении.
Проект завершен, мы завершили проверку формы с использованием HTML, CSS и Javascript. Теперь посмотрите на предварительный просмотр в реальном времени.
Теперь мы успешно прошли проверку формы входа с использованием HTML, CSS и Javascript. Вы можете использовать этот проект напрямую, скопировав его в свою IDE. Мы надеемся, что вы поняли проект. Если у вас есть какие-либо сомнения, не стесняйтесь комментировать!!
Если вы обнаружите, что этот блог полезен, то обязательно выполните поиск Codewithrandom в Google для Front End Projects with Source code и обязательно следуйте коду со случайной страницей в Instagram.
Следуйте: codewithrandom
Написал: Арун
Код: Nikhil
Какой редактор кода вы используете для этой проверки формы входа?
Я лично рекомендую использовать VS Code Studio, он прост и удобен в использовании.
этот проект адаптивен или нет?
Да Форма входа является адаптивным проектом
Используете ли вы какие-либо внешние ссылки для создания этого проекта?
Нет, мы используем чистый код JavaScript для проверки формы входа.