Как да използваме JavaScript за да валидираме формa за регистрация на уебсайт?
JavaScript е мощен език, който ни позволява да валидираме и обработваме форми за регистрация на потребители на уебсайта.
Добавяне на HTML форма
Първо, трябва да добавим HTML форма към уебстраницата си. Например:
<form>
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="first-name"><br>
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="last-name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br>
<label for="confirm-password">Confirm Password:</label>
<input type="password" id="confirm-password" name="confirm-password"><br>
<br>
<button type="submit">Register</button>
</form>
Добавяне на JavaScript
Сега, ще добавим JavaScript кода, който ще валидира и обработва формата. За целта, ще използваме събитието submit на формата, което се изпълнява, когато потребителят натисне бутона за изпращане на формата.
const form = document.querySelector('form');
form.addEventListener('submit', event => {
event.preventDefault();
// Код за валидация и обработка на формата
});
Валидация на празни полета
За да валидираме дали потребителските полета са празни, можем да използваме метода trim() на value свойството на всяко поле. Методът trim() премахва празните места от началото и края на низа.
const firstNameInput = document.getElementById('first-name');
const lastNameInput = document.getElementById('last-name');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const confirmPasswordInput = document.getElementById('confirm-password');
if (firstNameInput.value.trim() === '') {
alert('Please enter your first name.');
}
if (lastNameInput.value.trim() === '') {
alert('Please enter your last name.');
}
if (emailInput.value.trim() === '') {
alert('Please enter your email.');
}
if (passwordInput.value.trim() === '') {
alert('Please enter your password.');
}
if (confirmPasswordInput.value === '') {
alert('Please confirm your password.');
}
Валидация на парола
За да валидираме дали паролата отговаря на изискванията, можем да използваме регулярен израз. Например, ако искаме паролата да съдържа поне 6 символа, можем да използваме регулярния израз/^.{6,}$/.
if (!/^.{6,}$/.test(passwordInput.value)) {
alert('Please enter a password with at least 6 characters.');
}
Валидация на email
За да валидираме email адреса, можем да използваме регулярен израз. Например, можем да използваме следния регулярен израз, който ще провери дали email адресът е валиден:
const emailRegex = /^[^\s@]+@[^\s@]+.[^\s@]+$/;
if (!emailRegex.test(emailInput.value)) {
alert('Please enter a valid email address.');
}
Цялостен пример, които демонстрира форма за регистрация с валидация:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>User Registration Form</title>
<style>
.form-control {
margin-bottom: 10px;
}
label {
display: block;
margin-bottom: 5px;
}
input {
display: block;
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.error {
border-color: #ff0000;
}
.error-message {
color: #ff0000;
font-size: 12px;
margin-top: 5px;
}
</style>
</head>
<body>
<h1>User Registration Form</h1>
<form>
<div class="form-control">
<label for="first-name">First Name</label>
<input type="text" id="first-name" name="first-name">
<div class="error-message"></div>
</div>
<div class="form-control">
<label for="last-name">Last Name</label>
<input type="text" id="last-name" name="last-name">
<div class="error-message"></div>
</div>
<div class="form-control">
<label for="email">Email Address</label>
<input type="email" id="email" name="email">
<div class="error-message"></div>
</div>
<div class="form-control">
<label for="password">Password</label>
<input type="password" id="password" name="password">
<div class="error-message"></div>
</div>
<div class="form-control">
<label for="confirm-password">Confirm Password</label>
<input type="password" id="confirm-password" name="confirm-password">
<div class="error-message"></div>
</div>
<button type="submit">Submit</button>
</form>
<script>
const form = document.querySelector('form');
const firstNameInput = document.querySelector('#first-name');
const lastNameInput = document.querySelector('#last-name');
const emailInput = document.querySelector('#email');
const passwordInput = document.querySelector('#password');
const confirmPasswordInput = document.querySelector('#confirm-password');
form.addEventListener('submit', (event) => {
event.preventDefault();
const firstNameValue = firstNameInput.value.trim();
const lastNameValue = lastNameInput.value.trim();
const emailValue = emailInput.value.trim();
const passwordValue = passwordInput.value;
const confirmPasswordValue = confirmPasswordInput.value;
hideError(firstNameInput);
hideError(lastNameInput);
hideError(emailInput);
hideError(passwordInput);
hideError(confirmPasswordInput);
if (firstNameValue === '') {
showError(firstNameInput, 'Please enter your first name');
} else if (!isValidName(firstNameValue)) {
showError(firstNameInput, 'Please enter a valid first name');
}
if (lastNameValue === '') {
showError(lastNameInput, 'Please enter your last name');
} else if (!isValidName(lastNameValue)) {
showError(lastNameInput, 'Please enter a valid last name');
}
if (emailValue === '') {
showError(emailInput, 'Please enter your email address');
} else if (!isValidEmail(emailValue)) {
showError(emailInput, 'Please enter a valid email address');
}
if (passwordValue === '') {
showError(passwordInput, 'Please enter a password');
} else if (!isValidPassword(passwordValue)) {
showError(passwordInput, 'Please enter a valid password (min. 8 characters)');
}
if (confirmPasswordValue === '') {
showError(confirmPasswordInput, 'Please confirm your password');
} else if (passwordValue !== confirmPasswordValue) {
showError(confirmPasswordInput, 'Passwords do not match');
}
if (isValidName(firstNameValue) && isValidName(lastNameValue) && isValidEmail(emailValue) && isValidPassword(passwordValue) && passwordValue === confirmPasswordValue) {
alert('User registration successful!');
form.reset();
}
});
function showError(input, message) {
input.classList.add('error');
const errorMessage = input.nextElementSibling;
errorMessage.textContent = message;
}
function hideError(input) {
input.classList.remove('error');
const errorMessage = input.nextElementSibling;
errorMessage.textContent = '';
}
function isValidName(name) {
return /^[a-zA-Z]+$/.test(name);
}
function isValidEmail(email) {
return /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email);
}
function isValidPassword(password) {
return password.length >= 8;
}
</script>
</body>
</html>
Първоначално избираме HTML елементите, с които ще работим, като използваме метода document.getElementById за да изберем съответния елемент по ID. След това използваме trim метода, за да премахнем всякакви излишни интервали от входните данни.
След това извикваме функцията hideError, която скрива всякакви грешки, които може да бъдат изобразени от предишни валидации.
Следваща стъпка проверка за валидност на всеки входен параметър. Ако не е въведен или е въведен невалиден параметър, се изобразява съобщение за грешка, като се извиква функцията showError. Ако всички параметри са валидни, извежда се съобщение за успешна регистрация на потребител и формата се изчиства, използвайки метода form.reset.
Сега ще разгледаме в детайли някои от функциите, които се използват в кода.
function showError(input, message) {
const formControl = input.parentElement;
const errorElement = formControl.querySelector('.error-message');
errorElement.innerText = message;
formControl.classList.add('error');
}
function hideError(input) {
const formControl = input.parentElement;
formControl.classList.remove('error');
}
showError и hideError са функции, които се използват за показване и скриване на грешки на формата. showError получава елемента на формата, към който е свързана грешката, както и съобщението за грешка. Той добавя клас 'error' към родителския елемент на входния елемент, който се използва за стилизиране на грешките на формата.
function isValidName(name) {
return /^[a-zA-Z]+(([',. -][a-zA-Z ])?[a-zA-Z]*)*$/.test(name);
}
function isValidEmail(email) {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}
function isValidPassword(password) {
return password.length >= 8;
}
Тези функции извършват конкретните проверки за валидност на имената, електронната поща и паролата. isValidName и isValidEmail използват редовни изрази, за да проверят дали входните данни отговарят на определени критерии. isValidPassword просто проверява дали паролата има поне 8 символа.
Това е цялостният пример за валидация на форма с JavaScript. Тази техника може да се използва за валидация на всякакви форми за въвеждане на данни на уебсайта.