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

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

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

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

Чтобы удалить стили по умолчанию, Вы можете использовать свойство 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;
}


Вот не плохой способ применить селекторы + псевдоклассы + веб-технологии WAI-ARIA для веб-формы . Это подсказка для формы входа в систему с помощью свойств CSS.

Форма входа в систему

Разметка HTML



<form id="demo-aria" action="">
  <fieldset>
  <legend>Форма входа в систему</legend>
  <div>
  <label for="username">Логин:</label>
	  <input type="text" id="username" aria-describedby="username-tip" required />
	  <div role="tooltip" id="username-tip">Логин - это ваше имя пользователя в системе или электронный адрес</div>
	</div>
	<div>
	  <label for="password">Пароль:</label>
	  <input type="text" id="password" aria-describedby="password-tip" required />
	  <div role="tooltip" id="password-tip">Пароль для входа был отправлен на Ваш электронный адрес</div>
	</div>
  </fieldset>
</form>


CSS



legend {
  padding: 2px 8px;
  white-space: normal;
}

fieldset >


 div {
  position: relative;
  height: 68px;
}

div label {
  display: inline-block;
  width: 70px;
}

input:focus + [role="tooltip"] {
  display: block;
}

[role="tooltip"] {
  background: #eee;
  padding: 2px 4px;
  position: relative;
  display: none;
  z-index: 2;
}


Селектор :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" ;



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


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

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

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



<form>
<label for="phonenum">Телефон:</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, это означает, что на стороне сервера также должна быть проверка данных веб-форм перед отправкой их для обработки что бы избежать взлома сайта или MITM атаки .

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

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

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>