Провера ваљаности ЈаваСцрипта - Различите врсте валидације обрасца ЈаваСцрипта

Преглед садржаја:

Anonim

Увод у валидацију ЈаваСцрипт обрасца

Провера обрасца врши провјеру тачности креираних образаца и провјерава да ли су информације које су доставили корисници тачни. Валидација образаца се обично дешава на страни сервера, након што клијент затражи потребне информације. Након потврде обрасца, ако су нетачне информације или било које поље остављено празно. Затим би сервер послао поруку клијенту да су унесене информације нетачне или недостају. Валидација образаца омогућава купцима поверење да би све унесене информације биле тачне или би погрешка била бачена како би била исправљена.

Пример:

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

Ствари које треба провјерити док радите провјеру облика

  • Проверите да ли је корисник оставио празно поље које мора да попуни. Ако је празна, вратите „Поруку упозорења“.
  • Проверите да ли је корисник унео број где треба да се унесе нумеричка вредност. На пример, контакт подаци.
  • Проверите да ли је корисник у поље са именима унео абецедни знак.
  • Проверите да ли има нумерички и абецедни знак. Ако је поље обрасца алфанумеричко. На пример, поље за поруке.
  • Проверите да ли је корисник исправно унео лозинку у оба поља. (Поље за лозинку, Потврдите поље за лозинку)
  • Такође проверите да ли су исправно обележени сви падајући мени и потврдни оквир.

Врсте потврде форме

  • Провјера обрасца на страни клијента
  • Провера обрасца на страни сервера

1. Потврђивање обрасца на страни клијента

Да би се избегло напрезање и непотребна пропусност на серверу на страни клијента, корисно је коришћење Јсцрипт-а. Након валидације са стране клијента, требало би да имате и другу потврду на страни сервера. Разлог за још једну валидацију на страни сервера је тај што је корисник можда онемогућио ЈаваСцрипт на свом веб претраживачу.

Провера валидације на страни клијента захтева мање времена за валидацију будући да се провера ваљаности врши у корисничком прегледачу и помаже кориснику да има боље искуство. Док за проверу на страни сервера која се догађа на серверу он захтева корисников унос. Затим га треба послати на сервер пре валидације и на крају, корисник мора сачекати да одговор од сервера сазна на којем се пољу догодила грешка.

Пример



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



Излаз:

Закључак - Потврда ЈаваСцрипт обрасца

Провера обрасца у ЈаваСцрипт-у не захтева сложено кодирање, али са становишта корисника требало би да размишљамо о томе како би погрешили приликом попуњавања обрасца и како то може да се потврди помоћу различитих метода. Морамо бити сигурни да ако корисник тада унесе информације погрешно, порука о грешци на којем пољу је дошло до грешке и пружи упутства о формату уноса.

Препоручени чланци

Ово је водич за провјеру ЈаваСцрипт обрасца. Овде такође расправљамо о стварима које треба проверити док радите Валидацију обрасца и његове врсте. Можда ћете такође погледати следеће чланке да бисте сазнали више -

  1. Инкапсулација у ЈаваСцрипт-у
  2. Карактеристике ЈаваСцрипт-а
  3. Редовне изразе у ЈаваСцрипт-у
  4. АСП.Нет Валидатион Цонтролс
  5. Примери цхецкбок-а у Боотстрап-у
  6. Два начина валидације ХТМЛ обрасца са примерима