Корректность ввода input полей на jQuery с помощью регулярки

Владислав Белецкий
Владислав Белецкий .
Категория:
Комментариев: 0

В html формах часто требуется ограничить пользователю свободу ввода информации. Например, чтобы в поле телефон он вводил только цифры, а в поле имя – русские символы.

Сделать такие проверки можно и нужно через регулярные выражения в php. Но ведь он сработает только после отправки формы. Поэтому для удобства, пользователю лучше фильтровать данные сразу, на лету. Если он напишет не правильный символ в input поле, то скрипт сразу не пропустит его. Таким образом, мы сможем легко фильтровать входящие данные от пользователя до отправки формы.

Для реализации такой задачи создадим такую форму:

<form method=”post”>
<input type=”text” name=”cifri” placeholder=”Цифры”>
<input type=”text” name=”bykvi” placeholder=”Русские символы + пробел”>
<input type=”text” name=”alfav” placeholder=”Русские, латинские символы и цифры + знаки: .,’-"пробел”>
<input type=”submit” name=”otprav” value=”Отправить”>
</form>
<style>input { padding: 6px 9px; margin-bottom: 10px; width: 50%; display: block;}</style>

А после нее напишем скрипт, который будет срабатывать на события клика по полю, его изменению и в момент нажатия клавиши:

<script>
$(document).ready(function(){
$(‘[name=cifri]’).bind(“change keyup input click”, function() { this.value = this.value.replace(/[^0-9]/g, ”); });
$(‘[name=bykvi]’).bind(“change keyup input click”, function() { this.value = this.value.replace(/[^а-яА-Яs]/g, ”); });
$(‘[name=alfav]’).bind(“change keyup input click”, function() { this.value = this.value.replace(/[^0-9а-яА-Яa-zA-Z’.,”-s]/g, ”); });
});
</script>

Здесь мы просто фильтруем входящие данные на каждый input за счет регулярки. Например, в 1 примере мы разрешаем ввод только цифр: /[^0-9]/g. Если вам нужно добавить сюда пробел или тире, то регулярка изменится так: /[^0-9s-]/g. То есть символы знаков препинания лучше экранировать косой чертой.

Вот таким нехитрым способом мы сможем легко профильтровать форму пользователя до отправки ее на php обработчик!

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии