-
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> и соответствующие атрибуты к каждому элементу:
-
Например: Элемент
<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._%+-][email protected][a-z0-9.-]+\.[a-z]{2,}$"
title="Invalid password!"/>
<br/><br/>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
