Phenquestions
Проверката на формуляра е основната и най-важна част от процеса на уеб разработка. Обикновено проверката на формуляра се извършва от страна на сървъра. Проверката на формуляра помага при показване на съобщения за грешки на потребителя, ако има предоставени ненужни или грешни данни или задължителното поле остава празно. Ако сървърът намери някаква грешка, той изхвърля тази грешка; след това показваме съобщението за грешка на потребителя. Но можем да използваме javascript в предния край, за да проверим данните на формуляра и да покажем грешки веднага. В тази статия ще научим основната проверка на формуляра в javascript. Така че, нека да преминем направо към примерите и да видим как можем да направим това в javascript.
Примери
На първо място, ние приемаме формуляр с името „testForm“, в който имаме поле за въвеждане с етикет „Потребителско име“, а тип вход въвежда в нашия HTML файл. В маркера на формуляра създадохме събитие onsubmit, в което правим затваряне и връщаме функция validateFunc ().
Във файла на скрипта ще напишем дефиницията на функцията на validateFunc (), която ще се изпълнява всеки път, когато потребителят натисне бутона за изпращане. В тази функция ще проверим полето за въвеждане на потребителско име. Предполагаме, че искаме да проверим дали полето за потребителско име е празно или не, когато потребителят натисне бутона за изпращане.
Така че, за да проверите полето за потребителско име. Първо присвояваме променлива на документа.testForm, само за да се даде чист и разбираем поглед на кода. След това в дефиницията на функцията ще напишем кода за проверка. Ще напишем оператор if, за да проверим празното поле на формуляра. Ако полето за потребителско име е празно, ще покажем предупредително поле, за да покажем грешката, ще се фокусираме отново върху полето за потребителско име и ще върнем false, за да не бъде изпратен формулярът. В противен случай, ако премине проверката и данните се потвърдят, ще върнем вярно на функцията.
var theForm = документ.testForm;// Код за проверка на формуляр
функция validationFunc ()
ако (формулярът.име.стойност == "")
предупреждение ("името е празно");
формата.име.фокус ();
връщане false;
връщане (вярно);
След като напишете целия този код. Ако стартираме кода и кликнете върху бутона за изпращане, без да пишете нищо в полето на формуляра.
Както можете да забележите на снимката на екрана, приложена по-долу, тя извежда грешка в полето за предупреждение.
Това е много основен, но добър пример, за да започнете с прилагането на проверка на формуляра. За по-нататъшно внедряване, като валидиране на множество формуляри или искате да проверите и дължината на символа.
За тази цел първо предполагаме две полета на формуляра в маркера на формуляра с етикет „имейл“ и „парола“ в нашия HTML файл.
За валидиране в javascript, отново ще поставим оператор if за валидиране на полетата за формуляри за имейл и парола в дефиницията на функцията на файла на скрипта. Да предположим, че искаме да приложим множество проверки на имейл полето, като полето не трябва да е празно и дължината му не трябва да бъде по-малка от 10 знака. И така, можем да използваме ИЛИ „||“ в изявлението if. Ако се появи някоя от тези грешки, тя ще покаже предупредително поле със съобщението за грешка, което искаме да покажем, ще се съсредоточи върху полето за формуляр за имейл и ще върне false към функцията. По същия начин, ако искаме да приложим проверката на дължината на знака в полето за парола, можем да го направим.
var theForm = документ.testForm;// Код за проверка на формуляр
функция validationFunc ()
ако (формулярът.име.стойност == "")
предупреждение ("името е празно");
формата.име.фокус ();
връщане false;
ако (формулярът.електронна поща.стойност == "" || формата.електронна поща.стойност.дължина < 10)
предупреждение („Имейлът е неподходящ“);
формата.електронна поща.фокус ();
връщане false;
ако (формулярът.парола.стойност.дължина < 6)
предупреждение („Паролата трябва да е с дължина 6 знака“);
формата.парола.фокус ();
връщане false;
връщане (вярно);
След като напишете целия този код, презаредете страницата, за да имате актуализиран код. Сега или оставяме празно имейл поле, или пишем имейл с по-малко от 10 знака. И в двата случая ще покаже грешка „Имейлът е неподходящ“.
И така, по този начин можем да приложим проверка на основен формуляр в JavaScript. Също така можем да приложим проверка на данните от страна на клиента, използвайки Regex или като напишем собствена персонализирана функция. Да предположим, че искаме да приложим проверка на данните в полето за имейл. Регулярният израз би бил такъв за валидиране на имейл.
ако (/ ^ [a-zA-Z0-9.!# $% & '* + / =?^ _ '| ~ -] [имейл защитен] [a-zA-Z0-9 -] + (?: \.[a-zA-Z0-9 -] +) * $ /.тест (theForm.електронна поща.стойност))
предупреждение („Имейлът е неподходящ“);
формата.електронна поща.фокус ();
връщане false;
Това беше само основна демонстрация на проверка на данни с помощта на регулярни изрази. Но небето е отворено за вас да летите.
Заключение
Тази статия обхваща основната проверка на формуляра в javascript. Също така се опитахме и проникнахме в проверката на данните, използвайки регулярния израз. Ако искате да научите повече за regex, имаме специална статия, свързана с regex на linuxhint.com. За да научите и разберете концепциите на javascript и по-полезно съдържание като това, продължавайте да посещавате linuxhint.com. Благодаря ти!
