HTML5 — проверка веб-форм

Проверка веб-форм всегда была и есть важной задачей для многих веб-разработчиков. Кроме того, еще нужно информировать пользователя заполнившего веб-форму что он допустил ошибку при заполнении полей веб-формы. API HTML5 позволяет веб-разработчикам сделать простую проверку веб-форм без использования JavaScript.

В этом уроке, краткий обзор простой проверки веб-форм с помощью атрибутов HTML5, и как использовать API HTML5 в своих проектах для создания веб-форм.

Сразу отметим, что HTML5 новая веб-технология и не работает на всех браузерах, HTML5 — проверка веб-форм  предлагает отличный способ проверить поля форм, но проверка на стороне сервера всегда должна быть!

Базовая проверка веб-форм

Базовая проверка заключается в наиболее подходящих значений для атрибута type. Например, если сделать поле ввода для электронной почты нужно написать следующий код HTML:



<input type=”email” />        //The field value must be an email


Можно проверять URL с помощью следующего кода разметки:



<input type=”URL” />          // The field value must be a URL


После отправки значений автоматически проверяет поля формы если это не электронная почта, будет ошибка, так же и для URL, если это не адрес будет ошибка. Браузер сообщение об ошибке отображает, в очень дружественной манере.

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

  1. pattern:   —  атрибут используется, чтобы указать регулярное выражение, и значение поля должно соответствовать этому шаблону. Этот атрибут может использоваться в input type= text password email , url tel  и  search .
    Например, следующий фрагмент HTML использует атрибут pattern для поля ввода.
    
    
    <input type=”text” pattern=”[1-4]{5}” />
    
    
    

    При отправке формы, выполняется проверка полей ввода. В этом случае, если пользователь ввёл в поле буквы, значение проверку не пройдет.

  2. required:  — атрибут требует указать значение для входного элемента.
    
    
    <input type=”text” required />
    
    
    

    Если оставить поле пустым, будет происходить ошибка отправки формы.

  3. maxlength: Это целое число, определяющее максимальное количество символов, разрешенных для определенного поля ввода.
    
    
    <input type=”text” maxlength=”20” />
    
    
    

    Значение, введенное в поле веб-формы HTML5 должно быть не больше 20-ти символов.

  4. min и max: — атрибуты задают максимальное или минимальное значение для ввода символов.

Комплекс проверок с использованием HTML5 API

Комплекс проверок может быть легко обрабатываются с использованием HTML5 API. Например, можно сделать поле «пароль» и добавить поле подтверждение пароля. Вы должны убедиться в том, что значения обоих полей совпадают. Если не совпадают, пользователю должно быть показано сообщение об ошибке. Это действительно может быть сделано очень просто с помощью HTML5 API.

Сначала нужно подключить onchange проверку пароля, как в следующем фрагменте кода веб-формы HTML.



<form name="ValidationForm">
    Пароль: <input type="password" id="password1"/>
    Подтверждение пароля:<input type="password" id="password2"/>
    <input type="submit" value="submit"/>
</form>


Нам нужно проверить совпадают пароли. Если да, мы вызываем setCustomValidity() , для входа элемента (поле пароля в данном случае) с пустой строкой в качестве аргумента.

Это означает, что поле пароля помечено как допустимые и поэтому при отправке формы, не будет никакой ошибки. С другой стороны, если мы обнаружим, что пароли не совпадают в событии change мы вызываем setCustomValidity() с сообщением об ошибке в качестве аргумента. Это означает, что поле с паролем будет помечаться как недопустимые, и отобразится сообщение об ошибке, когда пользователь отправляет форму.

Следующий JavaScript реализует эту логику:



<script type="text/javascript">
window.onload = function () {
    document.getElementById("password1").onchange = validatePassword;
    document.getElementById("password2").onchange = validatePassword;
}
function validatePassword(){
var pass2=document.getElementById("password2").value;
var pass1=document.getElementById("password1").value;
if(pass1!=pass2)
    document.getElementById("password2").setCustomValidity("Passwords Don't Match");
else
    document.getElementById("password2").setCustomValidity('');
//empty string means no validation error
}
</script>


Эти подходы хороши тем, что вам не нужно беспокоиться о том, чтобы представить сообщение об ошибке пользователю. Вам всего лишь необходимо включить простой метод — setCustomValidity() — с соответствующими аргументами и сообщение об ошибке будет отображаться.

Заключение

HTML5 API предлагает огромный набор инструментов для настройки процесса валидации. Мы обсуждали часть этого API. Узнать о более сложных терминах увидеть демонстрацию кода вы можете на странице  HTML5 проверка данных веб-форм .

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

Ваш 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>