Руководство Javascript Form Validation
1. Form Validation
Очень часто вы встречаете website (вебсайт), где пользователь вводит информацию в форму (form) перед тем как отправить на сервер. Например форму регистрации аккаунта. Информация, которую пользователь вводит в форму, должна быть валидирована (validate) для обеспечения рациональности данных.
Некоторые примеры аутентификации:
- Проверьте и убедитесь, что данные не пусты.
- Проверьте формат электронной почты
- Проверьте формат номера телефона
- ..
В основном, имеются 3 способа для валидации данных:
- Данные form будут отправлены на server (сервер), и валидация (validate) будет выполнена со стороны сервера.
- Данные form будут валидированы со стороны client (клиента) используя\ Javascript, это поможет server работать меньше и увеличить продуктивность приложения.
- Использовать оба метода выше для валидации form.
В данной статье я расскажу про использование Javascript для валидации (validate) form. Ниже является изображение действия программы, когда пользователь нажимает на кнопку Submit.
- Вы должны зарегистрировать функцию в сочетании с событием onsubmit у form. Обязанность этой функции - проверять данные, введенные пользователем в form, и возвращать значение true, если вся введенная пользователем информация верна, и наоборот возвращать значение false.
- Когда пользователь нажимает кнопку Submit, вызывается функция в сочетании с событием onsubmit.
- Если функция в сочетании с событием onsubmit возвращает true, данные у form будут отправлены на server. Если наоборот, то Submit будет отменено.
2. Простой пример
OK, это простой пример, который поможет вам понять правила работы у Form перед тем как начать практиковать более сложные примеры.
Атрибут (attribute) action у <form> используетcя для определения страницы, на которую будут отправлены данные,. Или сказать по другому, это страница, которая обработает отправленные данные с <form> настоящей страницы.
Страницы обрабатывающие данные отправленные с form обычно написаны технологией Servlet/JSP, PHP или другой определенной технологией со стороны Server вместо страницы HTML. Но я не буду говорить об обработке данных в данной статье.
simple-validation-example.html
<!DOCTYPE html>
<html>
<head>
<title>Hello Javascript</title>
<script type = "text/javascript">
function validateForm() {
var u = document.getElementById("username").value;
var p = document.getElementById("password").value;
if(u== "") {
alert("Please enter your Username");
return false;
}
if(p == "") {
alert("Please enter you Password");
return false;
}
alert("All datas are valid!, send it to the server!")
return true;
}
</script>
</head>
<body>
<h2>Enter your Username and Password</h2>
<div style="border:1px solid #ddd; padding: 5px;">
<form method="GET" action="process-action.html" onsubmit = "return validateForm()">
Username: <input type="text" name="username" id="username"/>
<br><br>
Password: <input type="password" name = "password" id="password"/>
<br><br>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
process-action.html
<!DOCTYPE html>
<html>
<head>
<title>Process Action</title>
</head>
<body>
<h3>Process Action Page</h3>
OK, I got data!
<br/><br/>
<a href="javascript:history.back();">[Go Back]</a>
</body>
</html>
3. Получить доступ в данные form
Получить доступ в данные одного поля (field) через ID поля.
<input type="text" id="username"/>
<input type="password" id="password"/>
// Access field via ID:
var field = document.getElementById("fieldId");
var value = field.value;
Получить доступ в поля Form через атрибут name:
<form name="myForm" ...>
<input type="text" name="username"/>
<input type="password" name = "password"/>
<button type="submit">Submit</button>
</form>
// Get form via form name:
var myForm = document.forms["myForm"];
var u = myForm["username"].value;
var p = myForm["password"].value;
Когда пользователь вводит неправильные данные на поле form, вам нужно оповестить пользователя и в то же время focus (сфокусировать) на то поле.
validation-example1.html
<!DOCTYPE html>
<html>
<head>
<title>Validation</title>
<script type = "text/javascript">
function validateForm() {
// Get form via form name:
var myForm = document.forms["myForm"];
var u = myForm["username"].value;
var p = myForm["password"].value;
if(u== "") {
alert("Please enter your Username");
myForm["username"].focus(); // Focus
return false;
}
if(p == "") {
alert("Please enter you Password");
myForm["password"].focus(); // Focus
return false;
}
alert("All datas are valid!, send it to the server!")
return true;
}
</script>
</head>
<body>
<h2>Enter your Username and Password</h2>
<div style="border:1px solid #ddd; padding: 5px;">
<form name="myForm" method="GET" action="process-action.html" onsubmit = "return validateForm()">
Username: <input type="text" name="username"/>
<br><br>
Password: <input type="password" name = "password"/>
<br><br>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
Например: Попросить пользователя ввести число от 0 до 10.
validation-number-example.html
<!DOCTYPE html>
<html>
<head>
<title>Validation</title>
<script type = "text/javascript">
function validateForm() {
var myField = document.getElementById("myNumber");
var value = myField.value;
if( value == "" || isNaN(value) || value < 0 || value > 10) {
alert("Invalid input!");
myField.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<h2>Enter a Number between 0 and 10</h2>
<div style="border:1px solid #ddd; padding: 5px;">
<form name="myForm" action="process-action.html" onsubmit = "return validateForm()">
Number: <input type="text" id= "myNumber"/>
<br/><br/>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
4. Submit через Javascript
Нажмите на кнопку <button type="submit"> или <input type="submit"> внутри form, которая поможет вам отправить данные данного form к серверу, но вы так же можете это сделать через Javascript.
javascript-submit-example.html
<!DOCTYPE html>
<html>
<head>
<title>Javascript Submit</title>
<script type = "text/javascript">
function validateForm() {
var name = document.forms["myForm"]["fullName"].value;
if(name == "") {
alert("Please enter your name");
return false;
}
return true;
}
function submitByJavascript() {
var valid = validateForm();
if(!valid) {
return;
}
var myForm = document.forms["myForm"];
myForm.submit();
}
</script>
</head>
<body>
<h2>Submit a from with Javascript</h2>
<div style="border:1px solid #ddd; padding: 5px;">
<form name="myForm" action="process-action.html" onsubmit = "return validateForm()">
Your Name: <input type="text" name = "fullName" value =""/>
<br/><br/>
<button type="submit">Submit</button>
</form>
</div>
<br/>
<!-- A Button outside the form -->
Button outside the form:
<button onclick="submitByJavascript()">Click Me to submit form</button>
</body>
</html>
5. Валидировать автоматически
Браузер может автоматически валидировать (validate) некоторые виды данных на form, например добавить атрибут required (обязательно) в поле у form, чтобы сказать браузеру что это поле обязательно, браузер автоматически проверяет и оповещает пользователю, если пользователь не ввел информацию в то поле.
Примечание: Слишком старые браузеры, как IE версии 9 или старее не поддерживают автоматический validate.
required-example.html
<!DOCTYPE html>
<html>
<head>
<title>Required</title>
</head>
<body>
<h2>Required attribute</h2>
<div style="border:1px solid #ddd; padding: 5px;">
<form name="myForm" action="process-action.html" onsubmit = "return validateForm()">
Your Name: <input type="text" name = "fullName" value ="" required/>
<br/><br/>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
Некоторые новые элементы <input> были представлены в HTML 5, например color, date, datetime-local, email, month, number, range, search, tel, time, url, week,. Данные элементы имеют специальный атрибут (attribute) помогающий браузеру узнать как validate (валидировать) его данные автоматически. Ниже является список нескольких таких атрибутов:
Атрибут | Описание |
disabled | Определить, что данный элемент Input будет отключен (disabled). |
max | Определить максимальное значение данного элемента Input. |
min | Определить минимальное значение данного элемента Input. |
pattern | Определить pattern данного элемента Input. |
required | Определить поле введения обязательным. Пользователь должен ввести данные. |
type | Определить вид элемента Input. |
Смотреть детальный список элементов <input> и соответствующие атрибуты к каждому элементу:
- HTML Input types
Например: Элемент <input type="number"> с атрибутами min, max, браузер оповестит пользователя, если он/она введят число вне позволенного лимита.
attr-min-max-example.html
<!DOCTYPE html>
<html>
<head>
<title>Min Max Attributes</title>
</head>
<body>
<h2>Attribute min, max</h2>
<div style="border:1px solid #ddd; padding: 5px;">
<form name="myForm" action="process-action.html">
Enter your score (0-100):
<input type="number" name = "score" min= "0" max = "100"/>
<br/><br/>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
Например: Потребовать пользователя ввести код страны с 2-мя символами.
attr-pattern-example.html
<!DOCTYPE html>
<html>
<head>
<title>pattern attribute</title>
</head>
<body>
<h2>Attribute: pattern</h2>
<div style="border:1px solid #ddd; padding: 5px;">
<form name="myForm" action="process-action.html">
Country code:
<input type="text" name = "countryCode" pattern="[A-Za-z]{2}"
title="Two letter country code"/>
<br/><br/>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
Например: Потребовать пользователя ввести пароль с минимум 8 символами.
attr-pattern-example2.html
<!DOCTYPE html>
<html>
<head>
<title>pattern attribute</title>
</head>
<body>
<h2>Attribute: pattern</h2>
<div style="border:1px solid #ddd; padding: 5px;">
<form name="myForm" action="process-action.html">
Password:
<input type="password" name = "password" pattern=".{8,}"
title="8 or more characters"/>
<br/><br/>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
Например: Потребовать пользователя ввести сильный пароль, с минимум 8 символами, минимум одной прописной буквой (uppercase), и минимум одна строчная буква (lowercase).
attr-pattern-password-example.html
<!DOCTYPE html>
<html>
<head>
<title>pattern attribute</title>
</head>
<body>
<h2>Attribute: pattern</h2>
Password must contain 8 or more characters that are of at least one number,
and one uppercase and lowercase letter:
<br/><br/>
<div style="border:1px solid #ddd; padding: 5px;">
<form name="myForm" action="process-action.html">
Password:
<input type="password" name = "password"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Invalid password!"/>
<br/><br/>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
Пример: Потребовать пользователя ввести адрес электронной почты (email), используя атрибут pattern, чтобы гарантировать пользователь вводит email правильного формата.
attr-pattern-email-example.html
<!DOCTYPE html>
<html>
<head>
<title>pattern attribute</title>
</head>
<body>
<h2>Attribute: pattern</h2>
<div style="border:1px solid #ddd; padding: 5px;">
<form name="myForm" action="process-action.html">
Email:
<input type="password" name = "password"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
title="Invalid password!"/>
<br/><br/>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
Pуководства ECMAScript, Javascript
- Введение в Javascript и ECMAScript
- Быстрый старт с Javascript
- Диалоговое окно Alert, Confirm, Prompt в Javascript
- Быстрый запуск с JavaScript
- Переменные (Variable) в JavaScript
- Битовые операции
- Массивы (Array) в JavaScript
- Циклы в JavaScript
- Руководство JavaScript Function
- Руководство JavaScript Number
- Руководство JavaScript Boolean
- Руководство JavaScript String
- Заявление if/else в JavaScript
- Заявление Switch в JavaScript
- Обработка ошибок в JavaScript
- Руководство JavaScript Date
- Руководство JavaScript Module
- Функция setTimeout и setInterval в JavaScript
- Руководство Javascript Form Validation
- Руководство JavaScript Web Cookie
- Ключевое слово void в JavaScript
- Классы и объекты в JavaScript
- Техника симулирования класса и наследственности в JavaScript
- Наследование и полиморфизм в JavaScript
- Понимание Duck Typing в JavaScript
- Руководство JavaScript Symbol
- Руководство JavaScript Set Collection
- Руководство JavaScript Map Collection
- Понимание JavaScript Iterable и Iterator
- Руководство Регулярное выражение JavaScript
- Руководство JavaScript Promise, Async Await
- Руководство Javascript Window
- Руководство Javascript Console
- Руководство Javascript Screen
- Руководство Javascript Navigator
- Руководство Javascript Geolocation API
- Руководство Javascript Location
- Руководство Javascript History API
- Руководство Javascript Statusbar
- Руководство Javascript Locationbar
- Руководство Javascript Scrollbars
- Руководство Javascript Menubar
- Руководство JavaScript JSON
- Обработка событий в Javascript
- Руководство Javascript MouseEvent
- Руководство Javascript WheelEvent
- Руководство Javascript KeyboardEvent
- Руководство Javascript FocusEvent
- Руководство Javascript InputEvent
- Руководство Javascript ChangeEvent
- Руководство Javascript DragEvent
- Руководство Javascript HashChangeEvent
- Руководство Javascript URL Encoding
- Руководство Javascript FileReader
- Руководство Javascript XMLHttpRequest
- Руководство Javascript Fetch API
- Разбор XML в Javascript с помощью DOMParser
- Введение в Javascript HTML5 Canvas API
- Выделение кода с помощью библиотеки Javascript SyntaxHighlighter
Show More