Проверка на JavaScript форма - Различни видове валидиране на формата на JavaScript

Съдържание:

Anonim

Въведение в 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 формуляри с примери