Проверка HTML-формы может выполняться с помощью JavaScript.
Если поле формы (fname) пусто, эта функция выдает сообщение и возвращает false, чтобы предотвратить отправку формы:
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}Функцию можно вызвать при отправке формы:
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<h2>JavaScript Validation</h2>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
JavaScript часто используется для проверки числового ввода:
Пожалуйста, введите число от 1 до 10
<script> function myFunction() { var x; var text = "Input OK"; //Get the value of input field with id="numb" x = document.getElementById("numb").value; // If x is Not a Number, or x is less than one, or x is grather than 10 then if (isNaN(x) || x < 1 || x > 10) { text = "Not valid"; } document.getElementById("demo").innerHTML = text; }Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Validation</h2>
<p>Please input a number between 1 and 10:</p>
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
// Get the value of the input field with id="numb"
let x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
let text;
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
Проверка HTML-формы может выполняться браузером автоматически:
Если поле формы (fname) пусто, атрибут required предотвращает использование этой формы. поданный:
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Validation</h2>
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
<p>If you click submit, without filling out the text field,
your browser will display an error message.</p>
</body>
</html>
Автоматическая проверка формы HTML не работает в Internet Explorer 9 или более ранней версии.
Проверка данных — это процесс проверки правильности введенных пользователем данных. правильно и полезно.
Типичные задачи проверки:
заполнил ли пользователь все обязательные поля?
ввел ли пользователь верную дату?
ввел ли пользователь текст в числовое поле?
Чаще всего целью проверки данных является обеспечение правильного ввода данных пользователем.
Валидация может быть определена множеством различных методов и развернута во многих различные пути.
Проверка на стороне сервера выполняется веб-сервером после отправки входных данных на сервер.
Проверка на стороне клиента выполняется веб-браузером перед отправкой входных данных на веб-сервер.
HTML5 представил новую концепцию проверки HTML под названием constraint. проверка.
Проверка ограничений HTML основана на:
Проверка ограничений HTML Входные атрибуты
Проверка ограничений Псевдоселекторы CSS
Проверка ограничений Свойства и методы DOM
Указывает, что элемент ввода должен быть отключен.
Указывает максимальное значение входного элемента
Указывает минимальное значение входного элемента
Указывает шаблон значения входного элемента
Указывает, что поле ввода требует элемента
Указывает тип входного элемента
Полный список см. в разделе HTML. Входные атрибуты.
Выбирает элементы ввода с указанным атрибутом «отключено».
Выбирает входные элементы с недопустимыми значениями
Выбирает элементы ввода без указания «обязательного» атрибута.
Выбирает входные элементы с указанным атрибутом «required».
Выбирает входные элементы с допустимыми значениями
Полный список см. в CSS. Псевдоклассы.