В избранное    Домой    Карта сайта          Adminka

Вторник,  12 Dec 2017 г., 16:04
... всякое царство, разделившееся само в себе, опустеет; и всякий город или дом, разделившийся сам в себе, не устоит. /Евангелие от Матфея/

 Логин:  

 Пароль: 




Анонсы:
=== Дата: 14/08/2010     Автор: Jason Bourne ===

Простой валидатор форм

Часто приходится проверять заполнение форм перед их отправкой.
Чтобы автоматизировать работу, написан небольшой объектно-ориентированный валидатор.

01 // Для облегчения рутинных операций по манипуляциям с содержимым, атрибутами и т.д. 02 function elem(elemid){ 03 var el = { 04 attr: function(name,value){ 05 var oldval = this.obj.getAttribute(name); 06 if(value) this.obj.setAttribute(name,value); 07 return oldval; 08 }, 09 html: function(htm){ 10 var oldhtm = this.obj.innerHTML; 11 if(htm) this.obj.innerHTML = htm; 12 return oldhtm; 13 }, 14 text: function(txt){ 15 var oldtxt = this.obj.innerText; 16 if(txt) this.obj.innerText = txt; 17 return oldtxt; 18 }, 19 append: function(htm){ 20 var oldhtm = this.obj.innerHTML; 21 if(htm) this.obj.innerHTML += htm; 22 return oldhtm; 23 }, 24 children: function(tag){ 25 return this.obj.getElementsByTagName(tag); 26 }, 27 hide: function(){ 28 this.obj.style.olddisplay = this.obj.style.display; 29 this.obj.style.display = 'none'; 30 return this.obj.style.olddisplay; 31 }, 32 show: function(){ 33 if(this.obj.style.olddisplay) this.obj.style.display = this.obj.style.olddisplay; 34 else this.obj.style.display = 'block'; 35 return this.obj.style.display; 36 }, 37 addevent: function(name,handler){ 38 this.obj["on"+name] = handler; 39 } 40 }; 41 42 if(typeof(elemid) == "object") el.obj = elemid; 43 else { el.obj = document.getElementById(elemid); el.id = elemid;} 44 return el; 45 } 46 47 function validator(form){ 48 var v = { 49 //Указать элемент формы как обязательный для заполнения 50 required: function(name, msg){ 51 var input = this.form.elements[name]; 52 input.required = true; 53 input.msg = msg; 54 55 //Для того, чтобы было видно, что элемент обязателен для заполнения, 56 //комментарий к нему должен быть заключен в тег <label> 57 var labels = elem(this.form).children('label'); 58 for(var i = 0; i < labels.length; i++){ 59 if(elem(labels[i]).attr('for') == name) 60 { 61 //добавить в конец подписи к полю знак, что оно обязательно к заполнению 62 elem(labels[i]).append('<span style="color: red; ">*</span>'); 63 break; 64 } 65 } 66 67 }, 68 //Функция проверки форм 69 check: function(){ 70 var form = this.form; 71 for(var i = 0; i < form.elements.length; i++){ 72 if(form.elements[i].required) { 73 if(form.elements[i].value == ''){ 74 alert(form.elements[i].msg); 75 form.elements[i].focus(); 76 return false; 77 } 78 } 79 } 80 return true; 81 }, 82 83 //Настроить форму для автоматической проверки формы перед отправкой 84 autocheck: function(){ 85 this.form.onsubmit = function(e){ 86 e = e || window.event; 87 var form = target = e.target || e.srcElement; 88 return validator(form).check(); 89 } 90 } 91 } 92 93 if(typeof(form) == "object") v.form = form; 94 else { v.form = document.forms[form]; } 95 96 return v; 97 }

Пример:

validator('myform').required('name','Введите имя');
validator('myform').required('message','Введите сообщение');
validator('myform').autocheck();

Протестировано в браузере Firefox.

UPD: В Internet Explorer 8 тоже работает.

Комментарии к статье (0)


<<назад

Погода в Рудне
(Волгоградcкая обл.)

Подробнее >>


Курс валют
на 12 Дек 2017 г.
DKK - 93,1732
USD - 58,8370

MainLink