После того как вы сверстали свою форму, вам необходимо проверить корректность введенных данных, или же – соответствие определенному формату. Чуть ниже, вы научитесь писать простую валидацию на jQuery.
Как проверить введенное имя, телефон или email
Предположим, что у вас уже есть форма:
<form action="#" method="POST"> <p><input class="form-name" name="name" type="text" value="" placeholder="Введите ваше имя" required></p> <p><input class="form-phone" name="phone" type="text" value="" placeholder="Введите ваш телефон" required></p> <p><input class="form-email" name="email" type="email" value="" placeholder="Введите ваш e-mail"></p> </form>
Обратите внимание на следующие вещи:
- каждому элементу input был задан класс input-name, input-phone, input-email;
- у поля ввода почтового ящика уже стоит “тип” = емейл – и в принципе, этого хватает, чтобы вам не присылали спам (и хотя данный тип был введен относительно давно, старые браузеры его не поймут);
- на всех полях стоят placeholder – текст, который будут отображаться, если поле пустое;
- у первых 2 форм стоит атрибут required – что означает обязательный, как минимум один символ должен быть заполнен в строке.
Для начала пишем простую валидацию для нашего имени:
<script> //validate name var name = $('input[name="name"]').val(); if (name.length < 3) { alert('Пожалуйста введите корректное имя, состоящее минимум из 3 букв'); return false; } </script>
Идем дальше – теперь мы будем проверять телефон. В принципе, вы можете просто запретить ввод любых символов кроме цифр, и опять же поставить ограничение на количество символов. В данном примере, используем регулярные выражения:
<script> //validate phone var phone = $('input[name="phone"]').val(), intRegex = /[0-9 -()+]+$/; if((phone.length < 6) || (!intRegex.test(phone))) { alert('Пожалуйста введите ваш настоящий телефон'); return false; } </script>
Если вам понадобится скрипт который запрещает вводить любые символы кроме цифр, дайте мне об этом знать в комментариях.
Осталось написать валидацию для email поля. И хотя у нас type = email, подстраховаться никогда не бывает лишним:
<script> //validate email var email = $('input[name="email"]').val(), emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/; if(!emailReg.test(email) || email == '') { alert('Пожалуйста введите ваш email'); return false; } </script>
Обратите внимание – в условии стоит ИЛИ, это важный момент.
В принципе, это всё, что я хотел рассказать в этой небольшой статье 🙂 . А какие методы для валидации полей применяете вы?
Имхо, нужно всегда делать валидацию на сервере вдобавок к валидации на клиенте. Просто с точки зрения безопасности.
if (name.length < 3)
Ян негодует!
вы правы, лучше поменять проверку на “<= 2"
Спасибо