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

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

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

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

<form method="post">
<input type="text" name="cifri" placeholder="Цифры">
<input type="text" name="bykvi" placeholder="Русские символы + пробел">
<input type="text" name="alfav" placeholder="Русские, латинские символы и цифры + знаки: .,'-&quot;пробел">
<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-9\s\-]/g. То есть символы знаков препинания лучше экранировать косой чертой.

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Введите капчу: