Статья     Исходный код

Введите номер ICQ для проверки:

CSS:
input { border:solid 1px #aaa; width:300px; color:#777; } .input-error { background-color:#fdd; } .input-ok { background-color:#dfd; } #STATUS { padding-top: 4px; font-size: 10px; color: #aaa; }
HTML:
<div style="padding: 10px"> <p>Введите номер ICQ для проверки:</p> <div> <input type="text" id="ICQ" /> <div id="STATUS"></div> </div> </div>
JavaScript:
//Функция валидации текста //Входные параметры: ID поля для проверки, обработчик состояния[, минимальная длина][,максимальная длина][,регулярное выражение] //Обработчик состояния возвращает следующие коды: //EMPTY - поле пустое //OVERMIN - длина содержимого меньше допустимого, если представлено //OVERMAX - длина содержимого больше допустимого, если представлено //NOTMATCH - содержимое поля не соответствует регулярному выражению, если представлено 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); } //Пример использования AppendValidationStandart("ICQ", "STATUS", 5, 200,"^([0-9\-]{1,3})+$");