Разработка сайтов в Донецке, ДНР. Как настроить базовую проверку формы jQuery за две минуты

 
 

В этом руководстве показано, как настроить базовую проверку формы с помощью jQuery, демонстрируемую регистрационной формой.

Мы собираемся использовать плагин проверки jQuery для проверки нашей формы. Основной принцип этого плагина заключается в том, чтобы указать правила проверки и сообщения об ошибках для элементов HTML в JavaScript.

Вот живая демонстрация того, что мы собираемся построить:

Шаг 1. Включите jQuery

Во-первых, нам нужно подключить библиотеку jQuery. Плагин проверки jQuery был протестирован до версии jQuery 3.1.1, но демонстрация в этой статье отлично работает с версией 3.4.1, которая является последней.

Вы можете использовать любой из следующих вариантов загрузки:

Загрузите его с jquery.com

Загрузите его с помощью Bower: $ bower install jquery

Загрузите его с помощью npm или Yarn: $ npm install jqueryилиyarn add jquery

Используйте CDN: https: //ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

Создайте новый файл HTML с именем index.htmlи включите jQuery перед закрывающим тегом:

Если вы хотите использовать Bower или npm, но не знакомы с ними, вам могут быть интересны эти две статьи:

Управление пакетами для браузера с Bower

Руководство для начинающих по npm — диспетчеру пакетов узлов

Шаг 2. Включите подключаемый модуль проверки jQuery.

Выбери между:

Загрузите его из репозитория плагина на github.

Загрузите его с помощью Bower: $ bower install jquery-validation

Загрузите его с помощью npm: npm i jquery-validation

NuGet: Install-Package jQuery.Validation

Используйте CDN: https: //cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js

Включите плагин после jQuery:

Шаг 3: Создайте HTML-форму

Для регистрации мы хотим собрать следующую информацию о пользователе:

имя

фамилия

Эл. адрес

пароль

Итак, давайте создадим нашу форму, содержащую эти поля ввода:

 

 

Registration

 

 

 

 

 

 

При интеграции этого в реальное приложение не забудьте заполнить actionатрибут, чтобы убедиться, что форма отправлена ​​в правильное место назначения.

Шаг 4: Создайте стили для формы

Создайте новый файл css/styles.cssи включите его в

раздел вашего HTML-файла:

 

Скопируйте следующие стили во вновь созданный файл:

@import url («https: //fonts.googleapis.com/css? family=Open+Sans») ;

/* Styles */

* {

margin: 0;

padding: 0;

}

body {

font-family: «Open Sans»;

font-size: 14px;

}

.container {

width: 500px;

margin: 25px auto;

}

form {

padding: 20px;

background: #2c3e50;

color: #fff;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

border-radius: 4px;

}

form label,

form input,

form button {

border: 0;

margin-bottom: 3px;

display: block;

width: 100%;

}

form input {

height: 25px;

line-height: 25px;

background: #fff;

color: #000;

padding: 0 6px;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

form button {

height: 30px;

line-height: 30px;

background: #e67e22;

color: #fff;

margin-top: 10px;

cursor: pointer;

}

form.error {

color: #ff0000;

}

Обратите внимание на стили для.error, которые будут использоваться для сообщений об ошибках проверки.

Шаг 5: Создайте правила проверки

Наконец, нам нужно инициализировать плагин проверки формы. Создайте новый файл js/form-validation.jsи укажите его после

Скопируйте следующий код во вновь созданный файл:

// Wait for the DOM to be ready

$ (function () {

// Initialize form validation on the registration form.

// It has the name attribute «registration»

$ («form[name='registration’]»).validate ({

// Specify validation rules

rules: {

// The key name on the left side is the name attribute

// of an input field. Validation rules are defined

// on the right side

firstname: «required»,

lastname: «required»,

email: {

required: true,

// Specify that email should be validated

// by the built-in «email» rule

email: true

},

password: {

required: true,

minlength: 5

}

},

// Specify validation error messages

messages: {

firstname: «Please enter your firstname»,

lastname: «Please enter your lastname»,

password: {

required: «Please provide a password»,

minlength: «Your password must be at least 5 characters long»

},

email: «Please enter a valid email address»

},

// Make sure the form is submitted to the destination defined

// in the «action» attribute of the form when valid

submitHandler: function (form) {

form.submit () ;

}

}) ;

}) ;

Вывод

Готово! Теперь у вас есть идея, как настроить проверку формы с помощью jQuery. Имейте в виду, что это не заменяет проверку на стороне сервера. Злоумышленник по-прежнему может манипулировать правилами проверки или обходить их (например, с помощью инструментов разработчика браузера).

3D-печать5GABC-анализAndroidAppleAppStoreAsusCall-центрChatGPTCRMDellDNSDrupalExcelFacebookFMCGGoogleHuaweiInstagramiPhoneLinkedInLinuxMagentoMicrosoftNvidiaOpenCartPlayStationPOS материалPPC-специалистRuTubeSamsungSEO-услугиSMMSnapchatSonyStarlinkTikTokTwitterUbuntuUp-saleViasatVPNWhatsAppWindowsWordPressXiaomiYouTubeZoomАвдеевкаАктивные продажиАкцияАлександровск ЛНРАлмазнаяАлчевскАмвросиевкаАнализ конкурентовАнализ продажАнтимерчандайзингАнтрацитАртемовскАртемовск ЛНРАссортиментная политикаБелгородБелицкоеБелозерскоеБердянскБизнес-идеи (стартапы)БрендБрянкаБукингВахрушевоВендорВидеоВикипедияВирусная рекламаВирусный маркетингВладивостокВнутренние продажиВнутренний маркетингВолгоградВолновахаВоронежГорловкаГорнякГорскоеДебальцевоДебиторкаДебиторская задолженностьДезинтермедитацияДзержинскДивизионная система управленияДизайнДимитровДирект-маркетингДисконтДистрибьюторДистрибьюцияДобропольеДокучаевскДоменДружковкаЕкатеринбургЕнакиевоЖдановкаЗапорожьеЗимогорьеЗолотоеЗоринскЗугрэсИжевскИловайскИрминоКазаньКалининградКировскКировскоеКомсомольскоеКонстантиновкаКонтент-маркетингКонтент-планКопирайтингКраматорскКрасноармейскКрасногоровкаКраснодарКраснодонКраснопартизанскКрасный ЛиманКрасный ЛучКременнаяКураховоКурскЛисичанскЛуганскЛутугиноМакеевкаМариупольМаркетингМаркетинговая информацияМаркетинговые исследованияМаркетинговый каналМаркетинг услугМаркетологМарьинкаМедиаМелекиноМелитопольМенеджментМерчандайзерМерчандайзингМиусинскМолодогвардейскМоскваМоспиноНижний НовгородНиколаевНиколаевкаНишевой маркетингНовоазовскНовогродовкаНоводружескНовосибирскНумерическая дистрибьюцияОдессаОмскОтдел маркетингаПартизанский маркетингПервомайскПеревальскПетровскоеПлата за кликПоисковая оптимизацияПопаснаяПравило ПаретоПривольеПрогнозирование продажПродвижение сайтов в ДонецкеПроизводство видеоПромоПромоушнПрямой маркетингРабота для маркетологаРабота для студентаРазработка приложенийРаспродажаРегиональные продажиРекламаРеклама на асфальтеРемаркетингРетро-бонусРибейтРитейлРовенькиРодинскоеРостов-на-ДонуРубежноеСамараСанкт-ПетербургСаратовСватовоСвердловскСветлодарскСвятогорскСевастопольСеверодонецкСеверскСедовоСейлз промоушнСелидовоСимферопольСинергияСколковоСлавянскСнежноеСоздание сайтов в ДонецкеСоледарСоциальные сетиСочиСтаробельскСтаробешевоСтахановСтимулирование сбытаСуходольскСчастьеТелемаркетингТельмановоТираспольТорговый представительТорезТрейд маркетингТрейд промоушнТюменьУглегорскУгледарУкраинскХабаровскХарцызскХерсонХостингЦелевая аудиторияЦифровой маркетингЧасов ЯрЧелябинскШахтерскЮжно-СахалинскЮнокоммунаровскЯндексЯсиноватая