Валидация формы регистрации с помощью JavaScript

В данной статье мы рассмотрим валидацию регистрационных форм при помощи в JavaScript. Приведенный ниже рисунок демонстрирует, какая валидация используется для каждого поля ввода.

Валидация формы регистрации при помощи JavaScript

Как мы применим эту валидацию

Мы создадим возможности JavaScript(по одной на каждое поле ввода), которые проверят, проходит ли валидацию значение, введённое посетителем.

Все данные возможности вызываются из другой возможности. Она устанавливает фокус в поле ввода, если посетитель ввёл неверное значение. Если значение валидное, посетитель может продолжить заполнение формы. Последняя функцию вызывается при возникновении события onsubmit.

Программный код HTML формы регистрации

<!DOCTYPE html><html lang="en"><head><metacharset="utf-8"><title>JavaScript Form Validation using a sampleregistration form</title><meta name="keywords" content="example, JavaScript Form Validation, Sample registration form" /><meta name="description" content="This document is an example of JavaScript Form Validation using a sampleregistration form. " /><link rel='stylesheet' href='js-form-validation.css' type='text/css' /><script src="sample-registration-form-validation.js"></script></head><body onload="document.registration.userid.focus();"><h1>Registration Form</h1>Use tabkeys to move from one input field to the next.<form name='registration' onSubmit="return formValidation();"><ul><li><label for="userid">User id:</label></li><li><input type="text" name="userid" size="12" /></li><li><label for="passid">Password:</label></li><li><input type="password" name="passid" size="12" /></li><li><label for="username">Name:</label></li><li><input type="text" name="username" size="50" /></li><li><label for="address">Address:</label></li><li><input type="text" name="address" size="50" /></li><li><label for="country">Country:</label></li><li><select name="country"><option selected="" value="Default">(Please select a country)</option><option value="AF">Australia</option><option value="AL">Canada</option><option value="DZ">India</option><option value="AS">Russia</option><option value="AD">USA</option></select></li><li><label for="zip">ZIP Code:</label></li><li><input type="text" name="zip" /></li><li><label for="email">Email:</label></li><li><input type="text" name="email" size="50" /></li><li><label id="gender">Sex:</label></li><li><input type="radio" name="msex" value="Male" /><span>Male</span></li><li><input type="radio" name="fsex" value="Female" /><span>Female</span></li><li><label>Language:</label></li><li><input type="checkbox" name="en" value="en" checked /><span>English</span></li><li><input type="checkbox" name="nonen" value="noen" /><span>NonEnglish</span></li><li><label for="desc">About:</label></li><li><textarea name="desc" id="desc"></textarea></li><li><input type="submit" name="submit" value="Submit" /></li></ul></form></body></html>

sample-registration-form-validation.js – это отдельный файл JavaScript, содержащий программный код для валидации формы. js-form-validation.css – это файл стилей формы.

В виде демонстрации мы взяли только пять стран. Вы можете без проблем добавить в список любое число государств.

Программный код CSS для формы регистрации

h1 { margin-left:70px;}form li { list-style:none; margin-bottom:5px;}form ullilabel{ float:left; clear:left; width:100px; text-align:right; margin-right:10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:14px;}form ulli input, select, span { float:left; margin-bottom:10px;}form textarea { float:left; width:350px; height:150px;}[type="submit"] { clear:left; margin:20px 00230px; font-size:18px}p { margin-left:70px; font-weight: bold;}

JavaScript код для валидации

Функцию, которая вызывается в onSubmit

Она вызывает иные возможности, использующиеся для валидации.

function formValidation(){var uid = document.registration.userid;var passid = document.registration.passid;var uname = document.registration.username;var uadd = document.registration.address;var ucountry = document.registration.country;var uzip = document.registration.zip;var uemail = document.registration.email;var umsex = document.registration.msex;var ufsex = document.registration.fsex;if(userid_validation(uid,5,12)){if(passid_validation(passid,7,12)){if(allLetter(uname)){if(alphanumeric(uadd)){ if(countryselect(ucountry)){if(allnumeric(uzip)){if(ValidateEmail(uemail)){if(validsex(umsex,ufsex)){}} }} }}}}return false;}

Функцию для валидации поля ввода userid

function userid_validation(uid,mx,my){var uid_len = uid.value.length;if(uid_len == 0 || uid_len>= my || uid_len<mx){alert("User Id should not be empty / length be between "+mx+" to "+my);uid.focus();return false;}return true;}

Приведенная выше функцию проверяет, будет ли значение поля ввода userid строкой длиной от 5 до 12 символов. Если нет, то отображается сообщение об ошибке.

Блок-схема:

Валидация формы регистрации при помощи JavaScript

Функцию для валидации пароля

function passid_validation(passid,mx,my){var passid_len = passid.value.length;if(passid_len == 0 ||passid_len>= my || passid_len<mx){alert("Password should not be empty / length be between "+mx+" to "+my);passid.focus();return false;}return true;}

Приведенная выше функцию отвечает за проверку значения пароля. Его длина должна составлять от 7 до 12 символов. Если нет, то отображается сообщение об ошибке.

Блок-схема:

Валидация формы регистрации при помощи JavaScript

Функцию, отвечающая за валидацию имени посетителя

function allLetter(uname){ var letters = /^[A-Za-z]+$/;if(uname.value.match(letters)){return true;}else{alert('Username must have alphabetcharactersonly');uname.focus();return false;}}

Функцию проверяет, включает ли поле ввода username только буквенные символы. Если нет, то отображается сообщение об ошибке.

Блок-схема:

Валидация формы регистрации при помощи JavaScript

Функцию для проверки адреса посетителя

function alphanumeric(uadd){ var letters = /^[0-9a-zA-Z]+$/;if(uadd.value.match(letters)){return true;}else{alert('User address must have alphanumericcharactersonly');uadd.focus();return false;}}

Код, приведенный выше, проверяет, включает ли адрес посетителя только буквенно-цифровые символы. Если нет, то отображается сообщение об ошибке.

Блок-схема:

Валидация формы регистрации при помощи JavaScript

Функцию для проверки страны

function countryselect(ucountry){if(ucountry.value == "Default"){alert('Select your country from the list');ucountry.focus();return false;}else{return true;}}

Программный код, приведенный выше, проверяет, выбрана ли страна из списка. Если нет, то отображается сообщение об ошибке.

Блок-схема:

Валидация формы регистрации при помощи JavaScript

Функцию проверки индекса

function allnumeric(uzip){ var numbers = /^[0-9]+$/;if(uzip.value.match(numbers)){return true;}else{alert('ZIP code must have numericcharactersonly');uzip.focus();return false;}}

Программный код, приведенный выше, проверяет, будет ли индекс числом. Если нет, то отображается сообщение об ошибке.

Блок-схема:

Валидация формы регистрации при помощи JavaScript

Функцию проверки формата адреса электронной почты

function ValidateEmail(uemail){var mailformat = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;if(uemail.value.match(mailformat)){return true;}else{alert("You have entered an invalid email address!");uemail.focus();return false;}}

Функцию проверяет, соответствует ли введённый адрес электронной почты заданному формату. Если нет, то отображается сообщение об ошибке.

Блок-схема:

Валидация формы регистрации при помощи JavaScript

Функцию для проверки пола

function validsex(umsex,ufsex){x=0;if(umsex.checked) {x++;} if(ufsex.checked){x++; }if(x==0){alert('Select Male/Female');umsex.focus();return false;}else{alert('Form SuccessfullySubmitted');window.location.reload()return true;}}

Программный код, приведенный выше, проверяет, выбран ли пол. Если нет, то отображается сообщение об ошибке. Если выбрано значение Male или Female, функцию уведомляет, что форма успешно отправлена и перезагружает страницу.

Блок-схема:

Валидация формы регистрации при помощи JavaScript

Вот полный код JavaScript, использованный для валидации формы.

function formValidation(){var uid = document.registration.userid;var passid = document.registration.passid;var uname = document.registration.username;var uadd = document.registration.address;var ucountry = document.registration.country;var uzip = document.registration.zip;var uemail = document.registration.email;var umsex = document.registration.msex;var ufsex = document.registration.fsex;if(userid_validation(uid,5,12)){if(passid_validation(passid,7,12)){if(allLetter(uname)){if(alphanumeric(uadd)){ if(countryselect(ucountry)){if(allnumeric(uzip)){if(ValidateEmail(uemail)){if(validsex(umsex,ufsex)){}} }} }}}}return false;} function userid_validation(uid,mx,my){var uid_len = uid.value.length;if(uid_len == 0 || uid_len>= my || uid_len<mx){alert("User Id should not be empty / length be between "+mx+" to "+my);uid.focus();return false;}return true;}function passid_validation(passid,mx,my){var passid_len = passid.value.length;if(passid_len == 0 ||passid_len>= my || passid_len<mx){alert("Password should not be empty / length be between "+mx+" to "+my);passid.focus();return false;}return true;}function allLetter(uname){ var letters = /^[A-Za-z]+$/;if(uname.value.match(letters)){return true;}else{alert('Username must have alphabetcharactersonly');uname.focus();return false;}}function alphanumeric(uadd){ var letters = /^[0-9a-zA-Z]+$/;if(uadd.value.match(letters)){return true;}else{alert('User address must have alphanumericcharactersonly');uadd.focus();return false;}}function countryselect(ucountry){if(ucountry.value == "Default"){alert('Select your country from the list');ucountry.focus();return false;}else{return true;}}function allnumeric(uzip){ var numbers = /^[0-9]+$/;if(uzip.value.match(numbers)){return true;}else{alert('ZIP code must have numericcharactersonly');uzip.focus();return false;}}function ValidateEmail(uemail){var mailformat = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;if(uemail.value.match(mailformat)){return true;}else{alert("You have entered an invalid email address!");uemail.focus();return false;}}function validsex(umsex,ufsex){x=0;if(umsex.checked) {x++;}if(ufsex.checked){x++; }if(x==0){alert('Select Male/Female');umsex.focus();return false;}else{alert('Form SuccesfullySubmitted');window.location.reload()return true;}}

Блок-схема:

Валидация формы регистрации при помощи JavaScript

Скачать программный код валидации можно легко здесь.

Вы можете легко посмотреть пример JavaScript валидации формы регистрации в отдельном окне браузера и проверить, как она работает.

Мы хотели бы узнать мнение об данной статье. Также приветствуются любые конструктивные советы по улучшению приведенного в ней примера.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *