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

2023-05-30 0 ∞

В этой статье мы рассмотрим валидацию регистрационных форм с помощью 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 символов. Если нет, то выводится сообщение об ошибке.

Блок-схема:

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

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 символов. Если нет, то выводится сообщение об ошибке.

Блок-схема:

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

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 только буквенные символы. Если нет, то выводится сообщение об ошибке.

Блок-схема:

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

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

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 SuccessfullySubmitted');
window.location.reload()
return true;
}
}

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

Блок-схема:

Вот полный код валидации формы JS.

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 Form Validation using a Sample Registration Form»