валидиране Jquery форма и област в реално време

Валидиране на областта от страна на клиента - е нещо, което трябва да има всяка форма, няма никакво съмнение. На първо място, не е нужно потребителят да чакам да прекарат нерви. Второ, вие показвате, че сте загрижени за своите посетители. Посетителят е много хубаво да се знае предварително, че той не го направи.

валидиране Jquery форма и област в реално време

В този урок ще се научите как да се напише валидиране JQuery форма в реално време. Ако искате да видите това, което получавате, можете да натиснете "Demo" и да видим.

Какво знаем днес?

Като прилагаме JQuery ратифицира?

Има много начини да направите това, тук са най-често срещаните:

  1. Ние можем да създадем SPAN етикет (който ще съдържа информация за валидиране), в непосредствена близост до полето за въвеждане, и му даде някои ID, след което ние ще се обърнем към него.
  2. Ние можем да увийте всяка област в маркера за P, в рамките на който се създаде педя, който ще съдържа информация за валидиране област.
  3. Възможно е също така да се увие поле етикет P, в рамките на които "за поз» SPAN (в движение чрез JQuery).

Това ще работи, но това не е най-добрият начин за изпълнение. Защо? Защото твърде много ненужни HTML код във формуляра за влизане, което ние не се нуждаем. Трябва да следвате семантиката на кода.

Какво ще правим?

  1. Ние ще напиша проста форма, красива и чиста семантичен код, без никакви допълнителни маркери.
  2. Тъй като хората изпълват всяка област поотделно, можем да проследим и да го потвърдим в движение:
    • За да се определи позицията си в прозореца (горен ляв ъгъл)
    • Определя ширината
    • Така че ние знаем къде свършва.
    • Добавете информация за проверката в DIV блок с конкретен номер, в дясно от конкретната област. Също така възлага на класовете или .correct .incorrect.

Структурата на проекта

Ние ще трябва да създадете три файла:

Ще разгледаме всички етапи ... първо HTML код, а след това на необходимите CSS стилове, по-късно, ние ще се съсредоточи върху основната - JQuery скрипт формата валидиране.

писане HTML

Прекъсвам ...

Стъпка 1 - създаване на основния HTML код

За да започнете, създайте index.html файл и го поставете този основен код. Можете да видите, че се свърже JQuery подаде по-долу, преди да validation.js, която съдържа нашия скрипт за проверка.

Стъпка 2 - Създаване на форма, която е разделена на три части

Ще създадем форма, състояща се от три части, за да видите как да се валидира различни полета за въвеждане и проверка. За разделянето ние използваме FIELDSET и LABEL, за заглавията на всяка секция:

  1. Лична информация (потребителско име, дата на раждане, пол, превозно средство).
  2. Email (Поле за въвеждане на електронна поща на потребителя).
  3. Изявление (кратка информация за потребителя).

Стъпка 3 - добави областта и, за да потвърдите

Добре, сега ние създаваме няколко полета за въвеждане на нашия вид. В нашия урок, ние имаме специално подбрано множество различни области:

Ние ще обгръща всеки лейбъла и поле за въвеждане в маркера за P да бъде разделен на отделни единици. Сега си окончателно index.html файл ще бъде, както следва:

Това може да изглежда малко страшно, но това е, защото много полета за въвеждане в нашата форма. Всъщност, няма нищо сложно. Запазете файла и погледнете в браузъра, която се оказа. Сега малко украсяват ...

Добавянето на CSS

Тъй като CSS не Стилизиран основна тема на днешния урок, ние няма да се спирам на това. Ние просто трябва този CSS код, за да образуват изглеждаше красиво и всички блокове са на място.

Създайте файл style.css, поставете долния код в нея. Сега за формирането на бъдещето с валидиране JQuery, изглежда невероятно. Не е ли?

Писане форма валидиране JQuery

Това е най-интересно и вълнуващо част на урока. Но първо, трябва да се мисли за и описват основните аспекти на нашата работа. Всичко, което трябва да се планира.

Преди да пиша, си задайте следните три въпроса:

  1. Какво от сценария се нуждаем?
  2. Как искате да направите това?
  3. Как да се постигне?

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

Какво трябва да направим?

JS обект в този случай ще се нарича jVal. той ще съдържа следните методи:

  • jVal.fullName
  • jVal.birthDate
  • jVal.gender
  • jVal.vehicle
  • jVal.email
  • jVal.about

Променлива, която ще съдържа състоянието на текущата грешка - jVal.errors. И методът, който проверява дали съществуват някакви грешки, и потвърждава или отхвърля изпращането му. Ако имаше някакви грешки, насочва потребителя към горната част на формуляра, където може да се запълнят всички полета коректно.

Методът се нарича - jVal.sendIt

Сега можем да започнем да се развие валидиране скрипт форма JQuery. Когато пишем първия метод, тогава всичко ще отиде по-бързо и по-лесно.

Първи стъпки

код, базиран на един прост, абсолютно всичко кода на JQuery се съдържа в този синтаксис:

Валидиране на полето за потребителско име

Първата ни метод ще се справят с "потребителско име". Поставете я в обекта jVal, както е показано в следния пример:

Сега напишете няколко реда код в метода. Просто ги поставете, тогава ние ще разгледаме какво означава:

Ред 1: Добавяме DIV блок към документа. Информация клас, дава стил за единица, която се определя в style.css на файла, също го прави невидим използване дисплей: няма; Naschet ID, така че, за да имате бърз достъп до този блок и да ги манипулира с помощта на JQuery. Това DIV блок ще съдържа информация за валидиране област.

Ред 3: Писане призив към тази единица в променлива, тъй като ние ще го използваме много пъти.

Линия 4: Същото като в предишния случай, пишем поле пълно име връзка в променлива. Ние също така ще го използвам много пъти.

JQuery офсет () връща текущата позиция на елемент по отношение на документа. Той се връща като обект, който съдържа свойства отгоре и си тръгна. Ние използваме тази функция, за да ELE, за да се определи позицията на полето за въвеждане.

Сега ще добавим още няколко линии ...

Както можете да видите, ние започваме да работят с стилове nameInfo блок. По-конкретно, ние се позицията вдясно от полето за въвеждане. За тази цел ние се покачва с 3 пиксела нагоре (2 код низ), и да се премести на 15 пиксела в дясно от полето (3 код низ).

Писахме 50% от първия метод, отнесе въпроса към своя край. Сега е времето да се определи дали потребителят е въвел данните правилно, и да предприеме стъпки ...

Не изглежда? Има какво да се страхуват ...

Ред 1: Уверете се, че името е въведено от потребителя най-малко 6 символа.

Ред 2: Задаване на променливите jVal.errors да е вярно, тъй като установихме, че потребителското име е твърде кратък. Ние ще го използвате по-нататък.

Ред 3: Започваме да работи нашата nameInfo елемент (който се показва информация). На първо място, ние премахваме класа вярна, и възлага клас грешка. След това сложи съдържание в nameInfo елемент, т.е. информация, че името трябва да бъде по-дълъг от 6 символа. И накрая, ние правим видим нашето послание към потребителя.

Линия 4: Започваме да работят ни еле елемент (форма въвеждане на потребителско име). Извадете нормално класа и възлага погрешно.

Линия 5: Ако потребителското име е достатъчно дълъг, а след това ...

Line 6: Започваме да работят nameInfo елемент. Ако назначен грешката клас, извадете го и задайте правилния клас. Поставете в "птица", за да се разбере, че всичко е наред. И показва съобщение на потребителя.

Линия 7: елемент условията еле. Премахване на грешен клас, ако тя е влязла в сила и се прилага нормалната клас.

Ние създадохме нашата първа метод за валидиране! Това е време, за да го тестваме. Трябва да сме сигурни, че нашият метод ще се нарича, когато потребителят е приключило въвеждането на името си. За да се реализира това, ние трябва да се приложи на събитие в действие. Ние ще използвате функцията за промяна (). Поставете следния пример, при jVal обект:

Какво означава това в човешкия език: ако потребителят промени стойността на полето «Трите имена», а след това завършва с този метод се нарича пълно име, което валидира полето.

Сега си validate.js файл трябва да съдържа следния код:

Дата на утвърждаване на полето раждане

Сега всичко върви по-бързо. Ние просто трябва да се направи копие метод FullName и да направи някои промени.

Сега, копирайте метод FullName, да го поставите по-долу и преименуване дата на раждане. И направи следните промени:

  • Навсякъде, където намери nameInfo, заменете го с birthInfo
  • Вместо #fullname, използвайте #birthday променлива еле
  • Поставяне на образец за регулярен израз следните изрази birthInfo.css ():
  • Предишната ни, ако () израз трябва да бъде:
  • Съобщение за това поле е както следва: вид на дата в правилния формат

Ето как да изглежда метод рождената дата, след извършването на тези промени:

С помощта на регулярния израз (14 реда), ние проверяваме, че датата е 28/3/1987 формат. В ред 16, обръщаме внимание на датата на съответствието на рождения ден на члена с образец за регулярен израз.

И разбира се, ние трябва да прикачите събитие промяна () за датата на влизане в поле на раждане:

Сега имаме друга операционна форми валидиране метод за JQuery. Страхотна работа!

Валидиране на областта да стане

Отново копирате метод FullName, да го преименувате на пола и да направи следните промени:

  • Всички nameInfo преименувате genderInfo
  • Вместо #fullname, нанесете #woman променлива еле
  • В genderInfo.css () експресия променлива горната промяна в началото: pos.top-10 и се оставя за ляво: pos.left + ele.width () + 60
  • Нашата израз, ако () трябва да бъде:
  • Съобщението, че е: Вие сте мъж или жена?

Ето как да изглежда метод пол, след промяната:

В съответствие 14, ние проверяваме колко селектори избран радио. Ако е 0, потребителят не сте избрали, се появява съобщение за грешка.

И както винаги, да се добави към пола подход за бутоните за избор:

Валидиране на пулове - транспорт собственост

Сега копирайте методите на пола и да го преименувате в превозното средство, да направи следните промени:

  • Всички genderInfo да замени vehicleInfo
  • Вместо #woman, въведете #ship за еле.
  • В vehicleInfo.css () условия, стойността трябва да се остави лявото: pos.left + ele.width () + 40
  • Нашата израз, ако (), сега трябва да бъде:
  • Съобщение за потребителя: Сигурен съм, че имате най-малко две!

Ето как можете да погледнете този метод, след промяната:

На линия 14, определяме колко превозни средства, избрани от потребителя. Ако по-малко от две, се появява съобщение за грешка. Ако броят на избраната отметка е равен или по-малко от 1, това означава грешка.

Отново хвана този метод в областта на превозните средства:

Вероятно сте вече уморен ... Няколко методи за пълното утвърждаване JQuery. Това е време, за да потвърдиш имейл адреса.

Невярно писмото за потвърждаване

метод за копиране на раждане по, електронна поща, за да преименувате и да се промени:

  • Всички birthInfo променено на emailInfo
  • Вместо #birthday, пише в стойността на променлива #email ELE на
  • Предишната ни регулярен израз е:
  • Съобщение до: ми даде валиден имейл адрес, ок?

Ето как ще изглежда метод електронна поща, след извършване на промени:

И както винаги, ние хване метод имейл на полето:

Валидиране на областта на информацията за потребителя

За тази последна метод, копирайте FullName метод, преименувате го и го променя за:

  • Всички промени в nameInfo aboutInfo
  • Вместо #fullname, въведете #about в стойността на еле
  • Предишната ни израз, ако () е:
  • Съобщение в случай на грешка: хайде, кажи ми още малко!

Ето как трябва да изглежда този метод, след промяната:

Ние се придържат към този метод на полето:

Ние току-що създадената всички методи за валидиране на JQuery. Тя трябва да направите две неща: напиши последния метод sendIt, представят за контрол на действието, като кликнете върху "Изпращане" във формуляра.

Писане метод sendIt

Този метод се нарича след всички утвърдени методи, като последният, след натискане на бутона "Изпрати". Той проверява дали е имало грешки при проверката. Добрата новина, е по-лесно да се по-рано:

Ако променливите jVal.errors не е вярно, ние позволи изпращането на формата към сървъра.

Контролни дейности подадат

Последното нещо, което трябва да управляваме влиянието на бутона за изпращане. Това се прави по следния начин:

Ние се получи изпратени към елемента с едно щракване събитие. Тъй като различните браузъри имат различни възприятия превъртете до горната част на страницата, което трябва да направим много извън превъртането (линия 2). Осъществяване превъртане на върха (линия 3). След това сменете променливите jVal.errors за фалшиви, за да изпраща данни, произведени успешно. Следващ в приоритет се обадя на всички начини за валидиране. След това се връщаме невярно, което означава, че ние не позволи изпращането на данни, преди да ги проверява за валидност.

крайния продукт

Сега нашата JQuery скрипт форма валидиране е завършена. Тя изглежда по следния начин:

след думите

Демо източници за сваляне (0.03 Mb).

Благодаря ви, че всичко е наред!

Кажи ми, ако не е трудно, но можете и да добавите нещо, за да проверите продължителността на проверката за име, за да се гарантира, че името е въведено само български букви?

Благодаря ви, че работи)