Регулярные выражения для веб-формы

Псевдоклассы селекторов можно использовать для полей ввода веб-формы с разными значениями. Если Вы еще не знакомы с псевдоклассами, пожалуйста прочтите статью CSS селекторы чтобы Вам было легче понять работу разметки псевдоклассов.

Оглавление:
  1. Удалить стиль по умолчанию
  2. Применить селекторы для веб-формы
  3. Селектор :indeterminate
  4. Селекторы для проверки
  5. Регулярные выражения для формы
  6. Регулярные выражения для телефона
  7. Регулярное выражение для e-mail
  8. Подсказки пользователю
  9. Поддержка браузерами

Удалить стиль по умолчанию

Каждый браузер применяет для полей веб-формы встроенные в браузер свойства форматирования. Например, большинство браузеров закругляет углы для полей поиска, входа или добавляет градиенты, которые ну не как не подходят к дизайну сайта.

Чтобы удалить стили по умолчанию, Вы можете использовать свойство appearance: none; которое требует префиксы.

Поэтому применяйте свойства только тогда, когда это действительно нужно. После применения свойств для веб-формы желательно по мере возможности протестировать результат в разных браузерах.

input[type="text"],
input[type="email"],
input[type="tel"]
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
      -ms-appearance: none;
          appearance: none;
  outline: 0;
  box-shadow: none;
}

Свойство также удаляет тень границу чтобы полностью избавить от непонятных голубых теней и ошибок стиля во всех браузерах.

Результат:

type="text"
type="email"
type="tel"

к меню ↑

Применить селекторы для веб-формы

Селектор :focus работает в браузерах начиная с CSS 2.1 и добавляет стили для элемента который активируется, например.

input:focus,
textarea:focus,
select:focus {
  background-color: #eef;
}

Селектор :checked задаёт стили флажкам или переключателям, например.


input:checked ~ label {
  font-weight: bold;
}

Если нужен стиль по умолчанию, нажмите применить изменения, когда активируется :checked (проверка). Кроме того, вы можете использовать :not(:checked).

к меню ↑

Селектор :indeterminate

Согласно спецификации W3C псевдокласс :indeterminate, он предназначен для checkbox или radio кнопок.

Секрет этого селектора заключается в том, что он применяет стили только, когда установлен флажок (птичка) в .indeterminate свойств через JavaScript, например.

document.getElementById("mycheckbox").indeterminate = true;

Скрипт не имеет никакого эффекта на свойство .checked, которое может только быть true или false.

Есть несколько ситуаций когда селектор :indeterminate может быть полезен. Если у вас есть целый ряд радио кнопок, можно применить отметить всё но отметки будут в неопределенном состоянии.

к меню ↑

Селекторы для проверки

Селектор :required применяются для пустого поля, если было отправлено пустое поле будет предубеждение, подробности на этой странице HTML5 проверка данных веб-форм. Селектор :optional применяется если нет :required, но можно и без него, достаточно в CSS добавить псевдокласс :not(:required)

Селекторы :valid и :invalid применяются для проверки или для отмены проверки достоверности введённых данных в веб-форму.

Аналогично как и с :required, селектор :invalid или псевдокласс :not(:valid) применяет стили для вводных данных, которые содержит недопустимые данные, например.

input:invalid {
  border-color: red;
}

В этом примере недопустимые данные будут обведены красной границей.

к меню ↑

Регулярные выражения для формы

Буквенноцифровые значения

Буквенноцифровые значения — это сочетание латинских букв и цифр.



<form>
  <label for="username">Логин:</label>
  <input type="text" pattern="[a-zA-Z0-9]+">
  <input type="submit" value="Отправить">
</form>

это не обязательно должен быть Логин.

к меню ↑

Регулярные выражения для телефона

Дело в том что type="tel" не полностью поддерживаются веб-браузерми из-за расхождения формата телефонных номеров в разных странах.

Например, на полуострове Крым формат мобильного номера (050)XXX-XX-XX что-то вроде (050)555-55-55.

Регулярное выражение ^\(\d{3}\)\d{3}-\d{2}-\d{2}$ соответствует формату, следовательно элемент ввода будет выглядеть так:



<form>
  <label for="phonenum">Телефон:</label>
  <input type="tel" pattern="^\(\d{3}\)\d{3}-\d{2}-\d{2}$">
  <input type="submit" value="Отправить">
</form>

Для старых браузеров можно попробовать применить JavaScript:

function validphone(Phone) { 
  return /^\(\d{3}\)\d{3}-\d{2}-\d{2}$/.test(Phone); 
  }
к меню ↑

Регулярное выражение для e-mail

Это регулярное выражение с соответствующим символом @. Например для электронного адреса вида super@mail.com



<form>
  <label for="email">E-mail:</label>
  <input type="email" pattern="^([a-z0-9_-]+\.)*[a-z0-9_-]+@[a-z0-9_-]+(\.[a-z0-9_-]+)*\.[a-z]{2,6}$">
  <input type="submit" value="Отправить">
</form>

Регулярное выражение с символом @ может соответствовать имени пользователя Twitter, например @sky4man, но уже в type="text";



<label for="twitter">Пользователь Twitter:</label>
<input pattern="^@[A-Za-z0-9_]{1,15}$" type="text" />
<input type="submit" value="Отправить" />
к меню ↑

Подсказки пользователю

Чтобы предоставить пользователю описание об ошибках ввода в поле веб-формы можно использовать атрибут title:

Предоставление пользователю описание об ошибке
Описание об ошибке ввода телефонного номера


<form>
  <label for="tel">Телефон:</label>
  <input type="tel" name="tel" pattern="^\(\d{3}\)\d{3}-\d{2}-\d{2}$" title="Вы неверно ввели номер мобильного телефона, повторите ввод в формате (050)XXX-XX-XX" />
  <input type="submit" value="Отправить">
</form>
к меню ↑

Поддержка браузерами

Поддержка браузерами функции проверки вводимых данных веб-формы довольно неплохая, в принципе уже можно использовать проверку веб-форм HTML5 когда это необходимо.

Нельзя на стороне клиента полагаться только на проверку введённых данных одним только браузером, проверка может не сработать для злоумышленника (Хакер) или компьютерного бота. Кроме этого не все браузеры поддерживают HTML5. Это означает, что на стороне сервера также должна быть проверка данных веб-форм, перед отправкой для обработки.