[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Фильтрация вводимых символов
Форум PHP программистов > Безопасность данных и приложений
OTDUSHIWINSTON
16.02.2012 - 17:53
Ребята как сделать так что бы в окно "Счёт №" можно было вводить только символы английского алфавита и цифры, а в окно "Сумма" только цифры?

<form action="" method="POST" name="form">

<tr align="center">
<td width="200"><strong><font color="SteelBlue"> Система</strong> </td>
<td width="200"><strong><font color="SteelBlue"> Счёт №</strong> </td>
<td width="200"><strong><font color="SteelBlue"> Сумма</strong> </td>
<td width="200" rowspan="2"> <input type="submit" name="button" value="Отправить"> </td>
</tr>

<tr align="center">
<td width="200"> <select name="delivery2"><option value="WebMoey">WebMoey</option><option value="YandexMoney">YandexMoney</option><option value="MasterCard">MasterCard</option><option value="Visa">Visa</option></select></td>
<td width="200"> <input type="text" name="nomer" width="20">   </td>
<td width="200"> <input type="text" name="summa2" width="20">   </td>
</tr>


</form>




Спустя 3 минуты, 25 секунд (16.02.2012 - 16:56) kent666 написал(а):
JS событие на отпускание кнопки клавиатуры
Далее проверка содержимого инпута и если есть несовпадения, убираешь последний символ.
А вот скромненький примерчик
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script>
/**
* InputFilter.js: ненавязчивая фильтрация нажатий клавиш для тегов <input>
*
* Данный модуль отыскивает все элементы <input type="text"> в документе,
* которые имеют нестандартный атрибут "allowed". Регистрирует обработчик
* события onkeypress для всех таких элементов с целью ограничить возможность
* ввода символов только теми, которые перечислены в значении атрибута allowed.
* Если элемент <input> имеет при этом атрибут "messageid", значение
* этого атрибута воспринимается как id другого элемента документа.
* Когда пользователь пытается ввести недопустимый символ, отображается
* элемент messageid. Когда пользователь вводит допустимый символ,
* элемент messageid скрывается. Элемент с данным идентификатором предназначен
* для вывода пояснений, почему попытка ввода того или иного символа была отвергнута.
* Изначально этот элемент с помощью CSS-стиля должен быть сделан невидимым.
*
* Далее приводятся некоторые примеры HTML-кода, использующие этот модуль.
* Почтовый индекс:
* <input id="zip" type="text" allowed="0123456789" messageid="zipwarn">
* <span id="zipwarn" style="color:red;visibility:hidden">Только цифры</span>
*
* В броузерах, таких как IE, которые не поддерживают addEventListener(),
* обработчик keypress регистрируется этим модулем за счет переопределения
* возможно существующего обработчика события keypress.
*
* Этот модуль абсолютно ненавязчив, поскольку он не определяет никаких
* символов в глобальном пространстве имен.
*/
(function() { // Весь модуль оформлен в виде анонимной функции
        // По окончании загрузки документа вызывается функция init()
    if (window.addEventListener) window.addEventListener("load", init, false);
    else if (window.attachEvent) window.attachEvent("onload", init);
        // Найти все теги <input>, для которых необходимо зарегистрировать
        // обработчик события
    function init() {
        var inputtags = document.getElementsByTagName("input");
        for(var i = 0 ; i < inputtags.length; i++) { // Обойти все теги
            var tag = inputtags[i];
            if (tag.type != "text") continue; // Только текстовые поля
            var allowed = tag.getAttribute("allowed");
            if (!allowed) continue; // И только если есть аттрибут allowed
                // Зарегистрировать функцию-обработчик
            if (tag.addEventListener) tag.addEventListener("keypress", filter, false);
            else {
                    // attachEvent не используется, потому что в этом случае
                    // функции-обработчику передается некорректное значение
                    // ключевого слова this.
                tag.onkeypress = filter;
            }
        }
    }
        // Это обработчик события keypress, который выполняет фильтрацию ввода
    function filter(event) {
            // Получить объект события и код символа переносимым способом
        var e = event || window.event; // Объект события клавиатуры
        var code = e.charCode || e.keyCode; // Какая клавиша была нажата
            // Если была нажата функциональная клавиша, не фильтровать ее
        if (e.charCode == 0) return true; // Функциональная клавиша (только Firefox)
        if (e.ctrlKey || e.altKey) return true; // Нажата Ctrl или Alt
        if (code < 32) return true; // Управляющий ASCII-символ
            // Теперь получить информацию из элемента ввода
        var allowed = this.getAttribute("allowed"); // Допустимые символы
        var messageElement = null; // Сообщение об ошибке
        var messageid = this.getAttribute("messageid"); // id элемента с сообщением,
            // если есть
        if (messageid) // Если существует атрибут messageid, получить элемент
            messageElement = document.getElementById(messageid);
            // Преобразовать код символа в сам символ
        var c = String.fromCharCode(code);
            // Проверить, принадлежит ли символ к набору допустимых символов
        if (allowed.indexOf(c) != -1) {
                // Если c - допустимый символ, скрыть сообщение, если существует
            if (messageElement) messageElement.style.visibility = "hidden";
            return true; // И принять ввод символа
        }
        else {
                // Если c - недопустимый символ, отобразить сообщение
            if (messageElement) messageElement.style.visibility = "visible";
                // И отвергнуть это событие keypress
            if (e.preventDefault) e.preventDefault();
            if (e.returnValue) e.returnValue = false;
            return false;
        }
    }
})(); // Конец определения анонимной функции и ее вызов.
</script>
</head>
<body>
    <input id="zip" type="text" allowed="0123456789" messageid="zipwarn">
    <span id="zipwarn" style="color:red;visibility:hidden">Только цифры</span>
</body>

Спустя 1 минута, 28 секунд (16.02.2012 - 16:58) nugle написал(а):
OTDUSHIWINSTON
регулярные выражения тебе в помощь
if(!preg_match('#^[a-z\d]+$#i', $var)
    echo 'в окно "Счёт №" можно было вводить только символы английского алфавита и цифры';

Спустя 18 минут, 22 секунды (16.02.2012 - 17:16) OTDUSHIWINSTON написал(а):
Цитата
if(!preg_match('#^[a-z\d]+$#i', $var)

А куда именно вставлять етот код?

Спустя 3 минуты, 23 секунды (16.02.2012 - 17:19) nugle написал(а):
OTDUSHIWINSTON
когда обрабатываешь данные на сервере

Спустя 22 секунды (16.02.2012 - 17:20) kent666 написал(а):
OTDUSHIWINSTON
Если тебе нужно что бы браузер сам не разрешал вставку запрещенных символов, то php тебе здесь не в помощь. Можно потом осуществить проверку отправленных данных на тот случай если у пользователя отключен JS!!!
Делай правильно!!! Используй приведенную функцию wink.gif

Спустя 1 минута, 9 секунд (16.02.2012 - 17:21) nugle написал(а):
Цитата
Можно потом осуществить проверку отправленных данных на тот случай если у пользователя отключен JS!!!

Не можно, а нужно

Спустя 1 минута, 38 секунд (16.02.2012 - 17:23) OTDUSHIWINSTON написал(а):
Нужно, запретить ввод всего кроме разрешённого, как ето сделать?

Спустя 1 минута, 5 секунд (16.02.2012 - 17:24) kent666 написал(а):
OTDUSHIWINSTON
Вставсь этот код в пустой html и проверь как он работает

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script>
/**
* InputFilter.js: ненавязчивая фильтрация нажатий клавиш для тегов <input>
*
* Данный модуль отыскивает все элементы <input type="text"> в документе,
* которые имеют нестандартный атрибут "allowed". Регистрирует обработчик
* события onkeypress для всех таких элементов с целью ограничить возможность
* ввода символов только теми, которые перечислены в значении атрибута allowed.
* Если элемент <input> имеет при этом атрибут "messageid", значение
* этого атрибута воспринимается как id другого элемента документа.
* Когда пользователь пытается ввести недопустимый символ, отображается
* элемент messageid. Когда пользователь вводит допустимый символ,
* элемент messageid скрывается. Элемент с данным идентификатором предназначен
* для вывода пояснений, почему попытка ввода того или иного символа была отвергнута.
* Изначально этот элемент с помощью CSS-стиля должен быть сделан невидимым.
*
* Далее приводятся некоторые примеры HTML-кода, использующие этот модуль.
* Почтовый индекс:
* <input id="zip" type="text" allowed="0123456789" messageid="zipwarn">
* <span id="zipwarn" style="color:red;visibility:hidden">Только цифры</span>
*
* В броузерах, таких как IE, которые не поддерживают addEventListener(),
* обработчик keypress регистрируется этим модулем за счет переопределения
* возможно существующего обработчика события keypress.
*
* Этот модуль абсолютно ненавязчив, поскольку он не определяет никаких
* символов в глобальном пространстве имен.
*/
(function() { // Весь модуль оформлен в виде анонимной функции
        // По окончании загрузки документа вызывается функция init()
    if (window.addEventListener) window.addEventListener("load", init, false);
    else if (window.attachEvent) window.attachEvent("onload", init);
        // Найти все теги <input>, для которых необходимо зарегистрировать
        // обработчик события
    function init() {
        var inputtags = document.getElementsByTagName("input");
        for(var i = 0 ; i < inputtags.length; i++) { // Обойти все теги
            var tag = inputtags[i];
            if (tag.type != "text") continue; // Только текстовые поля
            var allowed = tag.getAttribute("allowed");
            if (!allowed) continue; // И только если есть аттрибут allowed
                // Зарегистрировать функцию-обработчик
            if (tag.addEventListener) tag.addEventListener("keypress", filter, false);
            else {
                    // attachEvent не используется, потому что в этом случае
                    // функции-обработчику передается некорректное значение
                    // ключевого слова this.
                tag.onkeypress = filter;
            }
        }
    }
        // Это обработчик события keypress, который выполняет фильтрацию ввода
    function filter(event) {
            // Получить объект события и код символа переносимым способом
        var e = event || window.event; // Объект события клавиатуры
        var code = e.charCode || e.keyCode; // Какая клавиша была нажата
            // Если была нажата функциональная клавиша, не фильтровать ее
        if (e.charCode == 0) return true; // Функциональная клавиша (только Firefox)
        if (e.ctrlKey || e.altKey) return true; // Нажата Ctrl или Alt
        if (code < 32) return true; // Управляющий ASCII-символ
            // Теперь получить информацию из элемента ввода
        var allowed = this.getAttribute("allowed"); // Допустимые символы
        var messageElement = null; // Сообщение об ошибке
        var messageid = this.getAttribute("messageid"); // id элемента с сообщением,
            // если есть
        if (messageid) // Если существует атрибут messageid, получить элемент
            messageElement = document.getElementById(messageid);
            // Преобразовать код символа в сам символ
        var c = String.fromCharCode(code);
            // Проверить, принадлежит ли символ к набору допустимых символов
        if (allowed.indexOf(c) != -1) {
                // Если c - допустимый символ, скрыть сообщение, если существует
            if (messageElement) messageElement.style.visibility = "hidden";
            return true; // И принять ввод символа
        }
        else {
                // Если c - недопустимый символ, отобразить сообщение
            if (messageElement) messageElement.style.visibility = "visible";
                // И отвергнуть это событие keypress
            if (e.preventDefault) e.preventDefault();
            if (e.returnValue) e.returnValue = false;
            return false;
        }
    }
})(); // Конец определения анонимной функции и ее вызов.
</script>
</head>
<body>
    <input id="zip" type="text" allowed="0123456789" messageid="zipwarn">
    <span id="zipwarn" style="color:red;visibility:hidden">Только цифры</span>
</body>

Спустя 43 секунды (16.02.2012 - 17:24) killer8080 написал(а):
<td width="200"> <input type="text" name="nomer" onkeyup="this.value = this.value.replace(/[^a-z\d]/i, '')" width="20">   </td>
<td width="200"> <input type="text" name="summa2" onkeyup="this.value = this.value.replace(/[^\d]/, '')" width="20">   </td>


UPD исправил

Спустя 3 минуты, 44 секунды (16.02.2012 - 17:28) killer8080 написал(а):
OTDUSHIWINSTON
но не забывай, проверка на стороне клиента, только для удобства, серверную никто не отменяет wink.gif

Спустя 22 секунды (16.02.2012 - 17:29) kent666 написал(а):
killer8080
Как по мне, то лучше использовать анонимную функцию! да и код в глаза не бросается unsure.gif

Спустя 2 минуты, 34 секунды (16.02.2012 - 17:31) killer8080 написал(а):
Цитата (kent666 @ 16.02.2012 - 16:29)
Как по мне, то лучше использовать анонимную функцию! да и код в глаза не бросается

inline JS по сути и есть анонимная функция wink.gif
И кому он должен бросаться в глаза? Юзеру больше не чем заняться, кроме как исходники копать, в которых он ничего не смыслит smile.gif

Спустя 14 минут (16.02.2012 - 17:45) OTDUSHIWINSTON написал(а):
Цитата
<td width="200"> <input type="text" name="nomer" onkeyup="this.value = this.value.replace(/[^a-z\d]/i, '')" width="20">  </td>
<td width="200"> <input type="text" name="summa2" onkeyup="this.value = this.value.replace(/[^\d]/, '')" width="20">  </td>


Хаааааа киллер от души!!! biggrin.gif Вот ето задумка, + тебе за креативность! )))

Спустя 10 минут, 7 секунд (16.02.2012 - 17:55) OTDUSHIWINSTON написал(а):
нашёл баг)) есе задержать клавишу то то что успело написаться не стирается))) попробуй)

Спустя 4 минуты, 24 секунды (16.02.2012 - 18:00) nugle написал(а):
OTDUSHIWINSTON
мда. вот тебе и первый баг на сервере уже пройдет, поэтому проверку на стороне сервера тоже делать надо

$var = !empty($_POST['var']) ? $_POST['var'] : null;
if(!preg_match('#^[a-z\d]+$#i', $var)
    echo 'в окно "Счёт №" можно было вводить только символы английского алфавита и цифры';

Спустя 2 часа, 21 минута, 8 секунд (16.02.2012 - 20:21) killer8080 написал(а):
исправил
<td width="200"> <input type="text" name="nomer" onkeyup="this.value = this.value.replace(/[^a-z\d]+/i, '')" width="20">   </td>
<td width="200"> <input type="text" name="summa2" onkeyup="this.value = this.value.replace(/[^\d]+/, '')" width="20">   </td>
Цитата (nugle @ 16.02.2012 - 17:00)
OTDUSHIWINSTON
мда. вот тебе и первый баг на сервере уже пройдет, поэтому проверку на стороне сервера тоже делать надо

само собой user posted image
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.