Как написать простую валидацию формы на jQuery

После того как вы сверстали свою форму, вам необходимо проверить корректность введенных данных, или же – соответствие определенному формату. Чуть ниже, вы научитесь писать простую валидацию на 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>

Обратите внимание – в условии стоит ИЛИ, это важный момент.
В принципе, это всё, что я хотел рассказать в этой небольшой статье 🙂 . А какие методы для валидации полей применяете вы?

автор: Dmitriy

З 2011 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com

Email: dmitriyribka@gmail.com

4 коментаря

Залишити коментар до Dmitriy Скасувати коментар