ООО ЭкоЮнит
FAQSearchMemberlistUsergroupsFilesLog inRegisterГлавная
printer-friendly view
 
AuthorMessage
Sergey Gender:Male


Местный босс - администратор


Joined: 06 Jan 2005
Show/Hide

В процессе доработки очередного веб-проекта потребовалось организовать проверку корректности вводимых данных (ИНН, КПП, номеров счетов и прочих нужных вещей) непосредственно на странице без её перезагрузки. Можно было воспользоваться возможностями html5 по проверке ввода, но полагаться на него по некоторым причинам пока не стоит. Разумеется на стороне сервера данные проверяются уже более строго, но это лишняя нагрузка и трата времени.
Замучившись искать и не обнаружив ничего путного, внезапно вспомнил, что на сайте nalog.ru видел подобную фичу. Это оказался плагин для Jquery jquery.is-input.js, простой, как три копейки и размером всего 3 (три) килобайта.

Способ использования

1. В начале страницы подключаем основной скрипт jquery.min.js или любой другой. Как видите, плагин работает практически со всеми релизами Jquery.
Code:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

2. Перед описанием проверямой формы или в конце страницы перед тэгом </body>, подключаем сам плагин jquery.is-input.js, определяем стиль css #is_input_hint, который используется плагином для вывода сообщения. Если стиль не определить, сообщения об ошибке выводиться не будут.
<style type="text/css">
<!--
#is_input_hint { z-index: 101; display: none; position: absolute; background-color: #ffffbf; font-size: 0.8em; padding: 2px 4px; border: 1px solid #aaa; }
-->
</style>
<script type="text/javascript" src="jquery.is-input.js"></script>


3. Инициализируем проверку вводимых данных.
<script type="text/javascript">
$(document).ready(function()
{
    //Определяем массив полей для однотипной проверки
    $o = $("[name='inn']").add("[name='kpp']").add("[name='ogrn']").add("[name='telephone']");
    if ($o.length) 
    {
        //Инициализируем проверку.
        //Указываем регулярное выражение для проверки значения regexp.
        //Формат регулярного выражения соответствует формату JavaScript при использовании функции test.
        //Текстовое сообщение при ошибке без html-тэгов hint. Строка будет выводится внизу поля ввода.
        //При необходимости можно указать обработчики событий при ошибке ввода onerror
        //и при изменении значения onchange
          
        $o.is_input({
            regexp: /^\d*$/,
            hint: 'Вы пытаетесь ввести недопустимые символы.\nРазрешается вводить только цифры.',
            
            //Обработчик события при ошибке ввода. Необязательный.
            //В качестве параметра field в функцию передаётся объект текущего поля.
            onerror: function(field){
                /*
                Здесь можно сделать дополнительную проверку или вывести другое сообщение.
                */
                if (field.name.toUpperCase() == 'INN')
                {
                    alert('Ошибка ' + this.hint);
                }
            },
                        
            //Обработчик события при изменении значения. Необязательный.
            //В качестве параметра field в функцию передаётся объект текущего поля.
            onchange: function(field){
                /*
                Здесь можно сделать дополнительную проверку при изменении значения.
                */
            }            
        });
    }

    //Проверка одного поля осуществляется аналогично группе полей.
    $("[name='lastname'").is_input({
        regexp: /^[а-яА-ЯёЁa-zA-Z- ]*$/,
        hint: 'Вы пытаетесь ввести недопустимые символы.\n Разрешены буквы русского и латинского алфавита.'
    });
});
</script>


4. Готово. Пример работы смотрите здесь.


Скрипт с плагином можно скачать с сайта-источника здесь
Protected Text:
Show


Доработка плагина
Оригинальный плагин не позволяет проводить проверку полей паролей (input type="password"). В доработанном варианте возможность проверки паролей включается указанием дополнительной опции password.
Использование:
<script type="text/javascript">
$(document).ready(function()
{
    //Проверка поля пароля.
    $("[name='pass']").is_input({
            password: true,
            regexp: /^[а-яА-ЯёЁa-zA-Z0-9]*$/,
            hint: 'Вы пытаетесь ввести недопустимые символы.\n Разрешены буквы русского и латинского алфавита, цифры.'
    });
});
</script>


При указании опций regexponblur и hintonblur (необязательно) проводится дополнительная проверка значения при выходе из поля (событие onblur).
Если содержимое поля не удовлетворяет выражению regexponblur, оно заменяется на значение по умолчанию (defaultValue) и выход из поля ввода отменяется.

<script type="text/javascript">
$(document).ready(function ()
{
    $("[name='firstname']").add("[name='middlename'").is_input({
        regexp: /^[а-яА-ЯёЁa-zA-Z- ]*$/,
        hint: 'Вы пытаетесь ввести недопустимые символы.\n Разрешены буквы русского и латинского алфавита, дефис, пробел.',
        
        // регулярное выражение для проверки при выходе из поля
        regexponblur: /[а-яА-ЯёЁa-zA-Z]/,
        // сообщение об ошибке при выходе из поля (необязательно) 
        hintonblur: 'Введённое значение не содержит значащих символов.' 
    });
});
</script>


Другие полезные страницы
Удобное поле (input) для телефона или маски ввода
HTML5: новые возможности веб-форм


Download check-input.html (3.54 KB). Added/Updated Fri 25 Sep, 2015 01:46. Downloaded 38 Time(s).
Пример страницы

Download jquery.is-input.js (3.95 KB). Added/Updated Fri 25 Sep, 2015 01:46. Downloaded 15 Time(s).
This file for registered users. Доработанный вариант jquery.is-input.js с проверкой полей паролей


_________________
Профессионал - это тот же дилетант, только знающий где ошибется. Генератор db_update.php для phpBB2 с некоторыми удобствами.
Как ставить моды. Что такое [SQL] и с чем его едят | Как правильно задавать вопросы и получать адекватные ответы | Правила форума
Бесплатная техподдержка только на форуме! Не надо стучаться в аську, скайп, слать емайлы, пытаться писать в приват. Спасибо за понимание. Please do not PM, ICQ, Skype or email me for support help - you won't get any reply. If you have a question or issue, post it in the appropriate forum/topic. Thanks!
Back to topOffline View user's profile Visit poster's website Skype Name
Ровер Gender:Male

Участник


Joined: 30 May 2015
Show/Hide

Спасибо за описание плагина. Я тоже ничего нормального и универсального не встречал.
Back to topOffline View user's profile
Расик Gender:Male


Joined: 15 Jun 2016
Show/Hide

Как сделать чтоб #is_input_hint при загрузке был невидимым?
Back to topOffline View user's profile
Sergey Gender:Male


Местный босс - администратор


Joined: 06 Jan 2005
Show/Hide

В определении стиля display: none; в первом посте не просто так написано.

_________________
Профессионал - это тот же дилетант, только знающий где ошибется. Генератор db_update.php для phpBB2 с некоторыми удобствами.
Как ставить моды. Что такое [SQL] и с чем его едят | Как правильно задавать вопросы и получать адекватные ответы | Правила форума
Бесплатная техподдержка только на форуме! Не надо стучаться в аську, скайп, слать емайлы, пытаться писать в приват. Спасибо за понимание. Please do not PM, ICQ, Skype or email me for support help - you won't get any reply. If you have a question or issue, post it in the appropriate forum/topic. Thanks!
Back to topOffline View user's profile Visit poster's website Skype Name
Display posts from previous:   

Summary Rating For >> Интерактивная проверка полей ввода на JavaScript (плагин Jquery)
Average Rating: 0.00 :: Min Rating: 0 :: Max Rating: 0 :: Number of Ratings: 0
Choose Rating: 1   2   3   4   5  

Similar Topics
Topic Author Forum Replies Last Post
No new posts DGControlMiniMap - плагин обзорной (мини-карты) для карт 2GIS (2ГИС)
Описание Класс DGControlMiniMap реализует элемент управления обзорная карта аналогичный API Яндекс-карт или Google Maps, который вы можете поместить на карту 2GIS. Создает уменьшенную карту показываемой местности,
Sergey Прочие технические вопросы (php, javascript, perl и другое) 1 Fri 28 Nov, 2014 22:21 View latest post
Владимир1971
No new posts Обязательные поля ввода
Sergey, когда я заходил на форум случайно нажал ентер и вокруг логина пароля появились красные рамки с окошком обязательное поле. Это какой-то мод? Можно его приспособить для phpBB3? Добавлено спустя 1 минуту 49 секунд:
Ровер Поддержка и моды для phpBB3 4 Sat 30 May, 2015 19:19 View latest post
Ровер
No new posts Увеличение / уменьшение поля ввода сообщения
А что это за мод который увеличивает или уменьшает поле сообщения. Или он взят из других модов, если да то есть ли возможность релиозовать его тока в posting_body ? Довольно полезная фишка, хотелось бы поставить Если не
Hovec Поддержка и моды для phpBB2 4 Sun 02 Nov, 2008 16:49 View latest post
Hovec
No new posts Сделать первую букву в слове заглавной на javascript
Как сделать на яваскрипт, чтобы при вводе в input text первая буква в слове становилась всегда заглавной? Пользователь вводит своё имя и надо чтобы оно начиналось с большой буквы.
Ровер Прочие технические вопросы (php, javascript, perl и другое) 2 Sat 05 Sep, 2015 18:55 View latest post
Ровер
No new posts Преобразование символов в строке в титульный регистр - toTitleCase (JavaScript)
Преобразует первый символ каждого слова строки к верхнему регистру, если этот символ является буквой. Все остальные символы приводятся к нижнему регистру. Если указать необязательный параметр - разделитель слов
Sergey Прочие технические вопросы (php, javascript, perl и другое) 0 Tue 15 Sep, 2015 16:58 View latest post
Sergey






All times are UTC + 3 hours
Users browsing this topic:
Registered Users: None

Jump to:   
printer-friendly view
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You can download files in this forum
/a
Username:

Password:

Log me on automatically each visit
  Яндекс.Метрика
CrackerTracker © 2004 - 2018 CBACK.de