Валидатор форм на стороне клиента

Этот скрипт позволяет быстро организовать проверку форм на сайте. Написал для себя в ходе одного из последних проектов, ибо надоело всё время писать конструкции вида

  1. if(!(document.forms[0].login.value)){
  2.     /*bla-bla-bla*/
  3. elseif(!(document.forms[0].password.value)){
  4.    /*bla-bla-bla*/
  5. }
  6. elseif(!(document.forms[0].email.value)){
  7.     /*bla-bla-bla*/
  8. }

Скрипт выглядит так.

  1. var js={
  2.     assoc:function(data, func){
  3. for(i in data)if(data[ i])func(data[ i], i);return data;
  4.     },
  5.   validate:function(frm, setup){
  6. var errFunc = arguments[2] || function(e){for(i in e)alert(i+':'+e[ i])}, errs = {}, cnt = 0, stop = arguments[3], deferr = arguments[4], ip = function(c){
  7. returnnew RegExp('^(?:|(?:[0-9]{1,2}|[01][0-9]{2}|2[0-4][0-9]|25[0-5])(?:\.(?:[0-9]{1,2}|[01][0-9]{2}|2[0-4][0-9]|25[0-5])){'+c+'})$');
  8.         };
  9.       js.assoc(setup, function(val, name){
  10. var flag = val instanceof Array, rule = flag ? val[0] : val, msg = deferr || (name + " filled incorrect"), errMsg = flag ? val[1] || msg : msg;
  11. if(cnt && stop)return;
  12. if(!({"string":function(src){
  13. return {
  14. 'email': /^(?:|[A-Za-z][A-Za-z0-9\.-_]*@[A-Za-z0-9\.-_\/]*\.[a-zA-Z]+)$/,
  15. 'zip': /^(?:|\d{5})$/,
  16. 'phone': /^(?:|\+?(\d{3})\s+\((\d{3})\)\s+(\d{3})-(\d{2})-(\d{2}))$/,
  17. 'date': /^(?:|\d{2}\.\d{2}\.\d{4}(?:|\s+\d{2}:\d{2}:\d{2}))$/,
  18. 'number': /^\d*$/,
  19. 'letters': /^[A-Za-zА-Яа-я]*$/,
  20. 'webstr': /^(?:|[A-Za-zА-Яа-я]+[A-Za-zА-Яа-я0-9\._-]*)$/,
  21. 'url': /^(?:|(?:[A-Za-z]+:\/\/|)\w+\.[A-Za-z0-9\.]+\w+[A-Za-z0-9\.-_\/]*\w+\.[A-Za-z0-9\.]+\w+)$/,
  22. 'ip': ip(3),
  23. 'ipv6': ip(5),
  24. 'other': /.*/
  25.                        }[/email|zip|phone|date|number|letters|webstr|url|ip|ipv6/.exec(rule) || 'other'].test(src) && (/required/.test(rule) ? src : true) && ((/\d+/.exec(rule) || Infinity) >= src.length);
  26.                    },
  27. "function":rule,
  28. "object":function(src){return rule.test(src)}
  29.                }[typeof rule])(frm[name].value)){errs[name] = errMsg; cnt++}
  30.        });
  31. if(cnt)errFunc(errs);
  32. return (cnt == 0);
  33.   }

Итак, имеем 2 функции.

assoc - вспомогательная функция для обхода ассоциативного массива (хеша). Первый аргумент - сам массив, второй - функция, которая вызывается для каждого элемента массива и принимает 2 аргумента - ключ и значение.
validate - собственно функция проверки. Аргументы функции:

  • Первый аргумент - собственно форма, которую надо проверить.
  • Второй - набор правил для проверки, представляющий собой ассоциативный массив, в котором ключи - это имена полей, а значения - соответствующие им правила. Правило проверки может быть:
    • регулярным выражением - значение поля будет проверено на соответствие этому РВ.
    • функцией, которой подаётся на вход один параметр - имя поля. Функция должна возвращать true или false
    • строкой, которая может содержать следующие элементы:
      • "required" - поле обязательно для заполнения, т.е. пустые значения не допускаются
      • число - максимальная длина поля
      • одно из следующих значений, накладывающих условие на тип поля:
        • email - email-адрес
        • zip - ZIP-код (5 цифр)
        • phone - номер телефона в международном формате
        • date - дата в формате "dd.mm.yyyy" или "dd.mm.yyyy hh:mm:ss"
        • number - число
        • letters - набор русских и латинских букв
        • webstr - буквы, цифры, дефис и знак подчеркивания, но начинаться должно с буквы (такое условие обычно накладывается на логин пользователя)
        • url - ftp, http или другой адрес
        • ip - IP-адрес
        • ipv6 - IPv6-адрес
    Ещё один момент: каждый элемент массива - набора правил может быть либо одним значением (собственно одно из описанных выше правил), либо массивом из 2 элементов: первый - собственно само правило, второй - сообщение об ошибке для данного поля.
  • Третий аргумент(необязательный) - функция обработки ошибок. Получает на вход ассоциативный массив, в котором ключи - имена полей, а значения - сообщения об ошибках. Эти сообщения нужно каким-либо способом вывести пользователю.
  • Четвёртый аргумент(необязательный) - если он равен true, функция прекратит работу после первой найденной ошибки. По умолчанию false
  • Последний аргумент - сообщение об ошибке по умолчанию. Используется для полей, для которых сообщения об ошибках не заданы. Если этот аргумент не задан, то для полей, для которых не определены сообщения об ошибках, будут использованы строки вида "имя_поля filled incorrect"

Ну и пример использования. Например, имеем форму

document.forms[0].onsubmit = function(){

return js.validate(this, {

'login':['webstr required 20''Недопустимый логин'],

'pass':['required 15''Недопустимый пароль'],

'conf_pass':[function(v){return v == frm['pass'].value}, 'Пароль не подтверждён'],

'email':['email required''Недопустимый e-mail']

   }, function(errors){

var err = document.getElementById('error');

     err.innerHTML = '';

for(i in errors)err.innerHTML += errors[i]+'<br />'

   });

}

или, например, если бы мы решили проверять e-mail с помощью регулярного выражения

document.forms[0].onsubmit = function(){

return js.validate(this, {

'login':['webstr required 20''Недопустимый логин'],

'pass':['required 15''Недопустимый пароль'],

'conf_pass':[function(v){return v == frm['pass'].value}, 'Пароль не подтверждён'],

'email':[/^[A-Za-z][A-Za-z0-9\.-_]*@[A-Za-z0-9\.-_\/]*\.[a-zA-Z]+$/, 'Недопустимый e-mail']

}, function(errors){

var err = document.getElementById('error');

     err.innerHTML = '';

for(i in errors)err.innerHTML += errors[i]+'<br />'

   });

Собственно, всё. В проектах, где много форм, эта штука поможет здорово сократить код)

Следующая запись

Предыдущая запись

Похожие записи

Комментарии

Еще нет комментариев.

Пингбэки

Оповещения открыты.

Трэкбэки

URL архива

Only authorized users can post comments