Привет Кодер! Добро пожаловать в блог Codewithrandom. В этом блоге мы узнаем, как написать программу проверки формы, используя HTML и Javascript. Мы проверяем пароли, подтверждаем пароли и идентификатор электронной почты с помощью JavaScript.
Средство проверки форм с использованием HTML, CSS и JavaScript[/caption]
Надеюсь, вам понравится наш блог. Давайте начнем с базовой HTML-структуры для проверки формы.
HTML-код: -
- В коде HTML у нас есть родительский элемент div с именем класса Container. Под этим divу нас есть заголовок с тегом H1, у нас есть элемент формы для создания формы, Эта форма имеет ID и имя класса с тем же именем Form.
- в элементе формы у нас есть вводэлементы для имя пользователя, адрес электронной почты, пароль и подтвердите пароль. мы даем уникальное имя идентификатора каждому входу.
- Также у нас есть элемент button для отправки формы. скопируйте весь HTML-код и вставьте его в свой HTML-файл.
<body> <div class="container"> <h1>Register With Us</h1> <form action="" id="form" class="form"> <div class="input"> <label for="username">Username</label> <input type="text" name="username" id="username" placeholder="Username" autocomplete="off" /> <small>Error message</small> </div> <div class="input"> <label for="email">Email</label> <input type="text" name="email" id="email" placeholder="Email" autocomplete="off" /> <small>Error message</small> </div> <div class="input"> <label for="password">Password</label> <input type="password" name="password" id="password" placeholder="Password" /> <small>Error message</small> </div> <div class="input"> <label for="c-password">Confirmer Password</label> <input type="password" name="c-password" id="c-password" placeholder="Confirmer Password" /> <small>Error message</small> </div> <button>Submit</button> </form> </div> </body>
Есть весь Html код проекта. Теперь вы можете видеть вывод без Css и JavaScript. Затем мы пишем Css для элемента формы Style, разрабатываем его и используем JavaScript для проверки пароля и электронной почты.
Вывод HTML-кода:-
Код CSS для средства проверки формы: -
- В этом CSS мы придаем стиль всем элементам, а также надлежащие отступы, цвет, поля и улучшаем внешний вид. Также у нас есть импорт шрифта Google в CSS.
- скопируйте весь код CSS и вставьте его в свой файл CSS.
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
body {
background-color: #f9fafb;
font-family: "Open Sans", sans-serif;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
width: 400px;
padding: 30px 40px;
}
.container h1 {
text-align: center;
margin: 0 0 20px;
font-size: 24px;
}
.input {
margin-bottom: 20px;
position: relative;
}
.input label {
display: block;
margin-bottom: 10px;
}
.input input {
width: 100%;
height: 40px;
padding: 0 15px;
background-color: transparent;
border: 2px solid #f0f0f0;
border-radius: 5px;
}
.input small {
display: block;
color: #e74c3c;
font-weight: bold;
font-size: 11px;
padding-top: 3px;
visibility: hidden;
}
.input.success input {
border: 2px solid #2ecc71;
}
.input.error input {
border: 2px solid #e74c3c;
}
.input.error small {
visibility: visible;
}
button {
width: 100%;
height: 40px;
line-height: 40px;
background-color: #3498db;
border: 1px solid #3498db;
border-radius: 5px;
cursor: pointer;
color: #fff;
display: block;
font-size: 16px;
}
Теперь мы завершили наш код Css для стиля формы.
Вывод кода HTML + Css:-
Теперь добавьте код javascript и дайте валидацию в форме.
Код JavaScript для средства проверки формы: -
- В коде javaScript мы создали функцию, логику для создания функциональности проверки в форме. Мы получаем все входные данные с помощью константных переменных, и мы создали логику для этих входных данных и кнопки отправки.
- В основном мы используем оператор if, else в javascript для проверки условия.
- Хорошо, теперь просто посмотрите на код JavaScript и вставьте его в свой файл JavaScript.
const form = document.getElementById("form");
const username = document.getElementById("username");
const email = document.getElementById("email");
const password = document.getElementById("password");
const cPassword = document.getElementById("c-password");
//Show Error Message
function showError(input, message) {
const formControl = input.parentElement;
formControl.className = "input error";
const small = formControl.querySelector("small");
small.innerText = message;
}
//Show Success message
function showSuccess(input) {
const formControl = input.parentElement;
formControl.classList.add("success");
}
//Check Required fields
function checkRequired(inputArr) {
inputArr.forEach(function (input) {
if (input.value.trim() === "") {
showError(input, `${getFieldName(input)} is required`);
} else {
showSuccess(input);
}
});
}
// Get Field Name
function getFieldName(input) {
return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}
// Check Input Lenght
function checkLenghth(input, min, max) {
if (input.value.length < min) {
showError(
input,
`${getFieldName(input)} must be at least ${min} characters `
);
} else if (input.value.length > max) {
showError(
input,
`${getFieldName(input)} must be less than ${max} characters `
);
} else {
showSuccess(input);
}
}
// Check E-mail Is Valid
function checkEmail(input) {
const re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
if (re.test(input.value.trim())) {
showSuccess(input);
} else {
showError(input, "E-mail is not Valid");
}
}
// Check Password Match
function checkPasswordMatch(input1, input2) {
if (input1.value !== input2.value) {
showError(input2, "Passwords do not match");
}
}
form.addEventListener("submit", (e) => {
e.preventDefault();
checkRequired([username, email, password, cPassword]);
checkLenghth(username, 3, 15);
checkLenghth(password, 8, 25);
checkEmail(email);
checkPasswordMatch(password, cPassword);
});
Теперь мы завершаем весь наш код для проверки формы. Теперь пришло время увидеть окончательный результат!
Окончательный результат проверки формы с использованием Html Css и Javascript: -
Читайте также:
Теперь мы завершили проверку нашей формы с использованием Html Css и Javascript. Надеюсь, вам нравится проверка формы. Вы можете увидеть выходное видео и скриншоты проекта. Смотрите другие наши блоги и получайте знания в области фронтенд-разработки.
Спасибо!
В этом посте мы узнаем, как создать проверку формы с помощью HTML, CSS и JavaScript. Если мы допустили ошибку или какую-либо путаницу, пожалуйста, оставьте комментарий, чтобы ответить или помочь вам в легком обучении.
Написано — Code With Random/Anki
Как сделать проверку формы с помощью HTML, CSS и JavaScript?
В коде HTML у нас есть родительский элемент div с именем класса Container. Под этим divу нас есть заголовок с тегом H1, у нас есть элемент формы для создания формы, Эта форма имеет ID и имя класса с тем же именем Form.
в элементе формы у нас есть вводэлементы для имя пользователя, адрес электронной почты, пароль и подтвердите пароль. мы даем уникальное имя идентификатора каждому входу.
Средство проверки формы с использованием HTML, CSS и JavaScript
В коде HTML у нас есть родительский элемент Div с именем класса Container. Под этим Divу нас есть заголовок с тегом H1, у нас есть элемент формы для создания формы, У этой формы есть идентификатори имя класса с тем же именем "Форма"
