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

Пример формы авторизации

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

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

Код формы авторизации (HTML, JavaScript)

<form class="zf">
	<dl>
		<dt><label for="input-login-auth">Логин</label></dt>
		<dd><input class="zf" id="input-login-auth" name="login" type="text" size="15" autocomplete="off" onclick="return { oOptions : { bFocusOnInit : true }, oRequired : { iMin : 5 }, oValid : { rPattern : /^[\w\d_\-]+$/ } }" /></dd>
		<dd class="zf-hint zf-hint-required"><i class="zf-arrow"></i>не&#160;менее 5&#160;символов (только цифры, буквы, символы «-», «_»)</dd>
	</dl>
	<dl>
		<dt><label for="input-password-auth">Пароль</label></dt>
		<dd><input class="zf" id="input-password-auth" name="password" type="password" size="15" autocomplete="off" onclick="return { oRequired : { iMin : 6 } }" /></dd>
		<dd class="zf-hint zf-hint-required"><i class="zf-arrow"></i>не&#160;менее 6&#160;символов</dd>
	</dl>
	<dl class="zf zf-checkboxgroup zf-nolabel">
		<dd>
			<div class="zf-option"><input class="zf" id="input-remember-auth-1" name="remember" type="checkbox" /> <label for="input-remember-auth-1">запомнить</label></div>
		</dd>
	</dl>
	<div class="zf-buttons"><input class="zf zf-submit" value="Войти" type="submit" /></div>
</form>