Перевірка форми JavaScript - Різні типи перевірки форми JavaScript

Вступ до перевірки форми JavaScript

Перевірка форми виконує перевірку точності створених форм і перевіряє правильність поданої користувачем інформації. Перевірка форм зазвичай відбувається на стороні сервера, після того, як клієнт введе необхідну інформацію. Після перевірки форми, якщо є якась неправильна інформація або будь-яке поле, залишене порожнім. Потім сервер надішле повідомлення клієнту про те, що введена інформація неправильна або відсутня. Перевірка бланків дає впевненість у замовниках, що вся інформація, яка була введена, була б коректною, або помилка буде кинута, щоб її можна було виправити.

Приклад:

function validate() (
var y = document.forms("Form")("f.name").value;
if (y == "")
(
alert("Name filed is empty");
return false;
)
)

Те, що потрібно перевірити під час перевірки форми

• Перевірте, чи залишив користувач поле порожнім, яке необхідно заповнити. Якщо воно порожнє, поверніть "Повідомлення про сповіщення".
• Перевірте, чи ввів користувач число, в якому має бути введене числове значення. Наприклад, контактні дані.
• Перевірте, чи користувач вводив алфавітний символ у полі імені.
• Перевірте наявність цифрових та алфавітних символів. Якщо поле форми буквено-цифрове. Наприклад, поле повідомлення.
• Перевірте, чи правильно користувач ввів пароль в обох полях. (Поле пароля, Підтвердження поля пароля)
• Також переконайтесь, що всі спадні і прапорці правильно позначені.

Види перевірки форми

• Підтвердження форми на стороні клієнта
• Перевірка форми на стороні сервера

1. Перевірка форми на стороні клієнта

Щоб уникнути напруги та непотрібної пропускної спроможності на сервері на стороні клієнта, перевірка корисна за допомогою Jscript. Після перевірки з боку клієнта у вас має бути ще одна перевірка з боку сервера. Причина зробити ще одну перевірку на стороні сервера полягає в тому, що користувач, можливо, відключив JavaScript у своєму веб-браузері.

Перевірка на стороні клієнта займає менше часу для перевірки, оскільки перевірка відбувається в браузері користувача, і це допомагає користувачеві мати кращий досвід. В той час як для перевірки на сервері, яка відбувається на сервері, вона вимагає введення користувача. Потім його потрібно надіслати на сервер перед валідацією, і нарешті, користувач повинен дочекатися відповіді від сервера, щоб знати, в якому полі сталася помилка.

Приклад



First name
required>

Last name
required>

Username

@
aria-describedby="inputGroupPrepend21" required>


City

State

Zip



Agree to terms and conditions

Submit form


Вихід :

2. Сертифікація форми на стороні сервера

Перевірка на стороні сервера виконується для того, щоб переконатися, що всі дані були введені користувачем і нічого не залишилося чорним або введено неправильно. Перевірка на стороні сервера гарантує відсутність помилок у формі, введеній користувачем.

Приклад



Form validation

function printError(elemId, hintMsg) (
document.getElementById(elemId).innerHTML = hintMsg;
)
function validateForm() (
var name = document.contactForm.name.value;
var email = document.contactForm.email.value;
var mobile = document.contactForm.mobile.value;
var country = document.contactForm.country.value;
var gender = document.contactForm.gender.value;
var hobbies = ();
var checkboxes = document.getElementsByName("hobbies()");
for(var i=0; i < checkboxes.length; i++) (
if(checkboxes(i).checked) (
hobbies.push(checkboxes(i).value);
)
)
var nameErr = emailErr = mobileErr = countryErr = genderErr = true;
if(name == "") (
printError("nameErr", "Please enter name");
) else (
var regex = /^(a-zA-Z\s)+$/;
if(regex.test(name) === false) (
printError("nameErr", "Enter valid name");
) else (
printError("nameErr", "");
nameErr = false;
)
)
if(email == "") (
printError("emailErr", "enter your email");
) else (
var regex = /^\ (email protected) \S+\.\S+$/;
if(regex.test(email) === false) (
printError("emailErr", "Please enter a valid email");
) else(
printError("emailErr", "");
emailErr = false;
)
)
if(mobile == "") (
printError("mobileErr", "Please enter mobile number");
) else (
var regex = /^(1-9)\d(9)$/;
if(regex.test(mobile) === false) (
printError("mobileErr", "Please enter a valid mobile number");
) else(
printError("mobileErr", "");
mobileErr = false;
)
)
if(country == "Select") (
printError("countryErr", "Please select country");
) else (
printError("countryErr", "");
countryErr = false;
)
if(gender == "") (
printError("genderErr", "Please select gender");
) else (
printError("genderErr", "");
genderErr = false;
)
if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) (
return false;
) else (
var dataPreview = "You've entered the following details: \n" +
"Full Name: " + name + "\n" +
"Email Address: " + email + "\n" +
"Mobile Number: " + mobile + "\n" +
"Country: " + country + "\n" +
"Gender: " + gender + "\n";
if(hobbies.length) (
dataPreview += "Hobbies: " + hobbies.join(", ");
)
alert(dataPreview);
)
);


Application Form
Full Name


Email Address


Mobile Number


Country
Select
Australia
India
United States
United Kingdom


Gender
Male
Female


Hobbies (Optional)
Sports
Movies
Music







Form validation

function printError(elemId, hintMsg) (
document.getElementById(elemId).innerHTML = hintMsg;
)
function validateForm() (
var name = document.contactForm.name.value;
var email = document.contactForm.email.value;
var mobile = document.contactForm.mobile.value;
var country = document.contactForm.country.value;
var gender = document.contactForm.gender.value;
var hobbies = ();
var checkboxes = document.getElementsByName("hobbies()");
for(var i=0; i < checkboxes.length; i++) (
if(checkboxes(i).checked) (
hobbies.push(checkboxes(i).value);
)
)
var nameErr = emailErr = mobileErr = countryErr = genderErr = true;
if(name == "") (
printError("nameErr", "Please enter name");
) else (
var regex = /^(a-zA-Z\s)+$/;
if(regex.test(name) === false) (
printError("nameErr", "Enter valid name");
) else (
printError("nameErr", "");
nameErr = false;
)
)
if(email == "") (
printError("emailErr", "enter your email");
) else (
var regex = /^\ (email protected) \S+\.\S+$/;
if(regex.test(email) === false) (
printError("emailErr", "Please enter a valid email");
) else(
printError("emailErr", "");
emailErr = false;
)
)
if(mobile == "") (
printError("mobileErr", "Please enter mobile number");
) else (
var regex = /^(1-9)\d(9)$/;
if(regex.test(mobile) === false) (
printError("mobileErr", "Please enter a valid mobile number");
) else(
printError("mobileErr", "");
mobileErr = false;
)
)
if(country == "Select") (
printError("countryErr", "Please select country");
) else (
printError("countryErr", "");
countryErr = false;
)
if(gender == "") (
printError("genderErr", "Please select gender");
) else (
printError("genderErr", "");
genderErr = false;
)
if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) (
return false;
) else (
var dataPreview = "You've entered the following details: \n" +
"Full Name: " + name + "\n" +
"Email Address: " + email + "\n" +
"Mobile Number: " + mobile + "\n" +
"Country: " + country + "\n" +
"Gender: " + gender + "\n";
if(hobbies.length) (
dataPreview += "Hobbies: " + hobbies.join(", ");
)
alert(dataPreview);
)
);


Application Form
Full Name


Email Address


Mobile Number


Country
Select
Australia
India
United States
United Kingdom


Gender
Male
Female


Hobbies (Optional)
Sports
Movies
Music







Form validation

function printError(elemId, hintMsg) (
document.getElementById(elemId).innerHTML = hintMsg;
)
function validateForm() (
var name = document.contactForm.name.value;
var email = document.contactForm.email.value;
var mobile = document.contactForm.mobile.value;
var country = document.contactForm.country.value;
var gender = document.contactForm.gender.value;
var hobbies = ();
var checkboxes = document.getElementsByName("hobbies()");
for(var i=0; i < checkboxes.length; i++) (
if(checkboxes(i).checked) (
hobbies.push(checkboxes(i).value);
)
)
var nameErr = emailErr = mobileErr = countryErr = genderErr = true;
if(name == "") (
printError("nameErr", "Please enter name");
) else (
var regex = /^(a-zA-Z\s)+$/;
if(regex.test(name) === false) (
printError("nameErr", "Enter valid name");
) else (
printError("nameErr", "");
nameErr = false;
)
)
if(email == "") (
printError("emailErr", "enter your email");
) else (
var regex = /^\ (email protected) \S+\.\S+$/;
if(regex.test(email) === false) (
printError("emailErr", "Please enter a valid email");
) else(
printError("emailErr", "");
emailErr = false;
)
)
if(mobile == "") (
printError("mobileErr", "Please enter mobile number");
) else (
var regex = /^(1-9)\d(9)$/;
if(regex.test(mobile) === false) (
printError("mobileErr", "Please enter a valid mobile number");
) else(
printError("mobileErr", "");
mobileErr = false;
)
)
if(country == "Select") (
printError("countryErr", "Please select country");
) else (
printError("countryErr", "");
countryErr = false;
)
if(gender == "") (
printError("genderErr", "Please select gender");
) else (
printError("genderErr", "");
genderErr = false;
)
if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) (
return false;
) else (
var dataPreview = "You've entered the following details: \n" +
"Full Name: " + name + "\n" +
"Email Address: " + email + "\n" +
"Mobile Number: " + mobile + "\n" +
"Country: " + country + "\n" +
"Gender: " + gender + "\n";
if(hobbies.length) (
dataPreview += "Hobbies: " + hobbies.join(", ");
)
alert(dataPreview);
)
);


Application Form
Full Name


Email Address


Mobile Number


Country
Select
Australia
India
United States
United Kingdom


Gender
Male
Female


Hobbies (Optional)
Sports
Movies
Music





Вихід:

Висновок - Перевірка форми JavaScript

Перевірка форми в JavaScript не вимагає складного кодування, але ми повинні подумати з точки зору користувача про те, як вони помиляться під час заповнення форми та як її можна перевірити за допомогою різних методів. Ми повинні переконатися, що якщо користувач вводить інформацію неправильно, то повідомлення про помилку, в якому полі сталася помилка, та надавати інструкції щодо формату введення.

Рекомендовані статті

Це керівництво для перевірки форми JavaScript. Тут ми також обговорюємо те, що потрібно перевірити під час перевірки форми та її типів. Ви також можете переглянути наступні статті, щоб дізнатися більше -

1. Інкапсуляція в JavaScript
2. Особливості JavaScript
3. Регулярні вирази в JavaScript
4. Контроль перевірки ASP.Net
5. Приклади прапорця в Bootstrap
6. Два способи перевірки форми HTML за допомогою прикладів