Для того, чтобы предупредить пользователя о том, что то, что он вводит в текстовое поле заведомо неверное, можно использовать валидацию.
Данная функция провеяет текстовое поле на следующие параметры: минимальная и максимальная длины ввода, регулярное выражение ввода. Функция снабжена визуальной отдачей (visual feedback), чтобы пользователь мог видеть, что в этом поле он допустил какую-то ошибку. Для функции можно создавать собственные обработчики различных состояний.Функция:
function AppendValidation(fieldid, errorhndl, minlength, maxlength, regularex)
{
var field = document.getElementById(fieldid);
field.onkeyup = function()
{
if (field.value.length == 0)
{
errorhndl(fieldid, "EMPTY");
return;
}
if (minlength != null && field.value.length < minlength)
{
errorhndl(fieldid, "OVERMIN");
return;
}
if (maxlength != null && field.value.length > maxlength)
{
errorhndl(fieldid, "OVERMAX");
return;
}
if (regularex != null && field.value.match(regularex) == null)
{
errorhndl(fieldid, "NOTMATCH");
return;
}
errorhndl(fieldid, "OK");
}
}
Стандартный обработчик ошибок:
function AppendValidationStandart(fieldid, statusid , minlength, maxlength, regularex)
{
var errorhndl = function ErrorHandler(field, errorstate)
{
var status = document.getElementById(statusid);
switch (errorstate)
{
case "OK":
status.innerHTML = "Поле " + field + " удовлетворяет всем условиям";
document.getElementById(field).className = "input-ok";
break;
case "EMPTY":
status.innerHTML = "Поле " + field + " пустое";
document.getElementById(field).className = "input-error";
break;
case "OVERMIN":
status.innerHTML = "Длина содержимого поля " + field + " <b>меньше</b> допустимого";
document.getElementById(field).className = "input-error";
break;
case "OVERMAX":
status.innerHTML = "Длина содержимого поля " + field + " <b>больше</b> допустимого";
document.getElementById(field).className = "input-error";
break;
case "NOTMATCH":
status.innerHTML = "Поле " + field + " не соответствует формату";
document.getElementById(field).className = "input-error";
break;
}
}
AppendValidation(fieldid, errorhndl, minlength, maxlength, regularex);
}
Стилевая составляющая:
input
{
border:solid 1px #ddd;
width:300px;
color:#777;
}
.input-error
{
background-color:#ffeeee;
}
.input-ok
{
background-color:#eeffee;
}
На основе функции AppendValidation можно создать свои собственные функции, например, по проверки соответствия ввода формату электронной почты, либо формату имени сайта и так далее.
Пример использования (проверяет ввод на соответствие формату E-Mail адреса):
<html>
<head>
<title>Валидация текстового поля</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* Стиль для компонентов функции */
</style>
<script type="text/javascript" language="Javascript">
//Код функции
</script>
</head>
<body>
<form>
<input type="text" id="EMAIL" />
<div id="STATUS"></div>
</form>
<script type="text/javascript" language="Javascript">
AppendValidationStandart("EMAIL", "STATUS", 5, 100,"^(w+)@(w+).(w+){2,3}$");
</script>
</body>
</html>