Готовые примеры /

Пример формы регистрации

В этом примере создадим стандартную форму регистрации. Исходные данные:

  • Поле «Логин» — обязательное для заполнения, содержит не менее 5 символов, среди которых могут быть только цифры, буквы и символы «-», «_».
  • Поле «Пароль» — обязательное для заполнения, содержит не менее 6 символов.
  • Значение поля «Пароль еще раз» должно совпадать со значением поля «Пароль».
  • Поле «Эл. почта» — необязательное, но, в случае заполнения, должно проверяться на валидность.
  • Кнопка отправка формы доступна всегда, но, в случае несоблюдения вышеперечисленных условий, при ее нажатии высвечиваются соответствующие сообщения об ошибках.
Основные данные
Необходимо заполнить
 не менее 5 символов (только цифры, буквы, символы «-», «_»)
Необходимо заполнить
 не менее 6 символов
Не совпадает с паролем
 должно совпадать с полем «Пароль»
Дополнительные данные
Некорректный адрес

Код формы регистрации (HTML, JavaScript)

<form class="zf" onclick="return { oOptions : { bUpdatableSubmit : false } }">
	<fieldset class="zf">
		<legend><span>Основные данные</span></legend>
		<dl>
			<dt><label for="input-login-registration">Логин</label></dt>
			<dd><input class="zf" id="input-login-registration" name="login" type="text" size="15" autocomplete="off" onclick="return { oRequired : { iMin : 5 }, oValid : { rPattern : /^[\w\d_\-]+$/ } }" /></dd>
			<dd class="zf-error">Необходимо заполнить</dd>
			<dd class="zf-hint zf-hint-required"><i class="zf-arrow"></i>не&#160;менее 5&#160;символов (только цифры, буквы, символы «-», «_»)</dd>
		</dl>
		<dl>
			<dt><label for="input-password-registration">Пароль</label></dt>
			<dd><input class="zf" id="input-password-registration" name="password" type="password" size="15" autocomplete="off" onclick="return { oRequired : { iMin : 6 } }" /></dd>
			<dd class="zf-error">Необходимо заполнить</dd>
			<dd class="zf-hint zf-hint-required"><i class="zf-arrow"></i>не&#160;менее 6&#160;символов</dd>
		</dl>
		<dl>
			<dt><label for="input-password-confirm-registration">Пароль еще раз</label></dt>
			<dd><input class="zf" id="input-password-confirm-registration" name="password-confirm" type="password" size="15" autocomplete="off" onclick="return { oRequired : {}, oValid : { aFrom : [{ oCompare : { sCondition : 'eq', sName : 'password' } }] } }" /></dd>
			<dd class="zf-error">Не совпадаетс&#160;паролем</dd>
			<dd class="zf-hint zf-hint-required"><i class="zf-arrow"></i>должно совпадать с&#160;полем «Пароль»</dd>
		</dl>
	</fieldset>
	<fieldset class="zf">
		<legend><span>Дополнительные данные</span></legend>
		<dl>
			<dt><label for="input-name-registration">Имя</label></dt>
			<dd><input class="zf" id="input-name-registration" name="name" type="text" /></dd>
		</dl>
		<dl>
			<dt><label for="input-email-registration">Эл. почта</label></dt>
			<dd><input class="zf" id="input-email-registration" name="email" type="text" onclick="return { oValid : { sType : 'email' } }" /></dd>
			<dd class="zf-error">Некорректный адрес</dd>
		</dl>
		<dl class="zf-date-box">
			<dt><label for="input-birthdate-registration">Дата рождения</label></dt>
			<dd><input class="zf zf-date" id="input-birthdate-registration" name="birthdate" type="text" /></dd>
		</dl>
	</fieldset>
	<div class="zf-buttons"><input class="zf zf-submit" value="Зарегистрироваться" type="submit" /></div>
</form>