Этот скрипт позволяет быстро организовать проверку форм на сайте. Написал для себя в ходе одного из последних проектов, ибо надоело всё время писать конструкции вида
- if(!(document.forms[0].login.value)){
- /*bla-bla-bla*/
- }
- elseif(!(document.forms[0].password.value)){
- /*bla-bla-bla*/
- }
- elseif(!(document.forms[0].email.value)){
- /*bla-bla-bla*/
- }
Скрипт выглядит так.
- var js={
- assoc:function(data, func){
- for(i in data)if(data[ i])func(data[ i], i);return data;
- },
- validate:function(frm, setup){
- 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){
- 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+'})$');
- };
- js.assoc(setup, function(val, name){
- var flag = val instanceof Array, rule = flag ? val[0] : val, msg = deferr || (name + " filled incorrect"), errMsg = flag ? val[1] || msg : msg;
- if(cnt && stop)return;
- if(!({"string":function(src){
- return {
- 'email': /^(?:|[A-Za-z][A-Za-z0-9\.-_]*@[A-Za-z0-9\.-_\/]*\.[a-zA-Z]+)$/,
- 'zip': /^(?:|\d{5})$/,
- 'phone': /^(?:|\+?(\d{3})\s+\((\d{3})\)\s+(\d{3})-(\d{2})-(\d{2}))$/,
- 'date': /^(?:|\d{2}\.\d{2}\.\d{4}(?:|\s+\d{2}:\d{2}:\d{2}))$/,
- 'number': /^\d*$/,
- 'letters': /^[A-Za-zА-Яа-я]*$/,
- 'webstr': /^(?:|[A-Za-zА-Яа-я]+[A-Za-zА-Яа-я0-9\._-]*)$/,
- 'url': /^(?:|(?:[A-Za-z]+:\/\/|)\w+\.[A-Za-z0-9\.]+\w+[A-Za-z0-9\.-_\/]*\w+\.[A-Za-z0-9\.]+\w+)$/,
- 'ip': ip(3),
- 'ipv6': ip(5),
- 'other': /.*/
- }[/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);
- },
- "function":rule,
- "object":function(src){return rule.test(src)}
- }[typeof rule])(frm[name].value)){errs[name] = errMsg; cnt++}
- });
- if(cnt)errFunc(errs);
- return (cnt == 0);
- }
- }
Итак, имеем 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-адрес
- Третий аргумент(необязательный) - функция обработки ошибок. Получает на вход ассоциативный массив, в котором ключи - имена полей, а значения - сообщения об ошибках. Эти сообщения нужно каким-либо способом вывести пользователю.
- Четвёртый аргумент(необязательный) - если он равен 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 />'
});
}
Собственно, всё. В проектах, где много форм, эта штука поможет здорово сократить код)
Комментарии
Еще нет комментариев.