English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Этот пример показывает новые возможности валидации форм H5, как создать страницу формы регистрации пользователей, для вашего参考, подробности см. ниже
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Страница формы регистрации пользователей</title>
<style>
#form_content{
width:600px;
margin:0 auto;
position:absolute;
left:400px;
}
#form_content .dc{
width:600px;
margin-top:10px;
overflow:hidden;
}
#form_content .dc h3{
text-align:center;
}
#form_content b{
display:inline-block;
height:40px;
line-height: 40px;
margin-left:20px;
}
#form_content input{
display:inline-block;
height:34px;
width:200px;
border-radius:2px;
margin-left:60px;
padding-left:10px;
}
.pc{
width:200px;
height:40px;
float:right;
line-height:40px;
text-align:center;
margin:0 20px 0;
background:#333;
color:#fff;
font-weight:bold;
border-radius:8px;
display:none;
}
input#sub{
display:inline-block;
width:215px;
background:#f0f;
margin-left:144px;
}
.show_pass{
background:limegreen;
display:block;
}
.show_warn{
background:#e4393c;
display:block;
}
#audio_bground{
width:100%;
height:100%;
background:#afa;
position:absolute;
z-index:-10;
}
</style>
</head>
<body>
<!--новые возможности input тега-->
<form>
<!--email атрибут-->
Тип почты<input type="email"/><br/>
<!--tel атрибут-->
Тип телефона<input type="tel"/><br/>
<!--number атрибут-->
Тип чисел<input type="number"/><br/>
<!--date атрибут-->
Тип даты<input type="date"/><br/>
<!--month атрибут-->
Тип месяца<input type="month"/><br/>
<!--week атрибут-->
Тип периода<input type="week"/><br/>
<!--range атрибут-->
Интервал чисел<input type="range" min="18" max="60"/><br/>
<!--search атрибут-->
Тип поиска<input type="search"/><br/>
<!--color атрибут-->
Выбор цвета<input type="color"/><br/>
<!--url атрибут-->
Тип网址<input type="url"/><br/>
<input type='submit'/>
</form>
<hr/>
<div id="form_content">
<form action="">
<div class="dc"><h3>Страница регистрации пользователей</h3></div>
<div class="dc"><b>Псевдоним пользователя</b><input id="user" type="text" autofocus required pattern="^[0-9a-zA-Z]{6,10}$"/><p class="pc">Введите имя пользователя</p></div>
<div class="dc"><b>Пароль пользователя</b><input id="pwd" type="password" required pattern="^\w{8,12}$"/><p class="pc">Введите пароль</p></div>
<div class="dc"><b>Личный адрес электронной почты</b><input id="email" type="email" required/><p class="pc">Введите почту</p></div>
<div class="dc"><b>Личная страница</b><input id="url" type="url" required/><p class="pc">Введите личную страницу (необязательно)</p></div>
<div class="dc"><b>Контактный телефон</b><input id="tel" type="tel" required/><p class="pc">Введите контактный телефон</p></div>
<div class="dc"><b>Ваш возраст</b><input id="age" type="number" min="18" max="60" required/><p class="pc">Введите ваш возраст</p></div>
<div class="dc"><b>Дата рождения</b><input id="date" type="date" required/><p class="pc">Выберите дату рождения</p></div>
<div class="dc"><input id="sub" type="submit" value="Подтвердить регистрацию"/></div>
</form>
</div>
<script>
var uname=document.getElementById('user');
uname.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='8-12 цифр или букв';
}
uname.onblur=function(){
if(this.validity.valid)
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='Формат имени пользователя правильный';
}
else if(this.validity.valueMissing) {
this.nextElementSibling.className = 'pc show_warn';
this.nextElementSibling.innerHTML = 'Имя пользователя не может быть пустым';
}else if(this.validity.patternMismatch){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Некорректный формат имени пользователя';
}
}
var upwd=document.getElementById('pwd');
upwd.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='Состоит из 6-12 цифр/букв/символов';
}
upwd.onblur=function(){
if(this.validity.valid)
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='Формат пароля правильный';
else if(this.validity.valueMissing)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Пароль пользователя не может быть пустым';
}else if(this.validity.patternMismatch){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Некорректный формат пароля';
}
}
var e_mail=document.getElementById('email');
e_mail.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='Введите вашу常用ную электронную почту';
}
e_mail.onblur=function(){
if(this.validity.valid) {
this.nextElementSibling.className = 'pc show_pass';
this.nextElementSibling.innerHTML = 'Формат электронной почты правильный';
else if(this.validity.valueMissing)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Электронная почта не может быть пустой';
}else if(this.validity.typeMismatch)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Некорректный формат электронной почты';
}
}
var url=document.getElementById('url');
url.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='Введите вашу личную домашнюю страницу (по желанию);'
}
url.onblur=function(){
if(this.validity.valid) {
this.nextElementSibling.className = 'pc show_pass';
this.nextElementSibling.innerHTML = 'Формат网址а правильный';
}else if(this.validity.typeMismatch)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Некорректный формат网址а';
}
}
var uphone=document.getElementById('tel');
uphone.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='Введите ваш контактный телефон';
}
uphone.onblur=function(){
if(this.validity.valid)
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='Формат номера телефона правильный';
else if(this.validity.valueMissing)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Номер телефона не может быть пустым';
}else if(this.validity.typeMismatch)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Некорректный формат номера телефона';
}
}
var uage=document.getElementById('age');
uage.onfocus=function(){
this.nextElementSibling.style.diplay='block';
this.nextElementSibling.innerHTML='Введите ваш возраст';
}
uage.onblur=function(){
if(this.validity.valid)
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='Ваш возраст соответствует требованиям для регистрации';
}else if(this.validity.rangeOverflow)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Ваш возраст больше, чем возрастной диапазон регистрации';
}else if(this.validity.rangeUnderflow)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Ваш возраст меньше, чем возрастной диапазон регистрации'
else if(this.validity.valueMissing)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Возраст не может быть пустым';
}
}
var udate=document.getElementById('date');
udate.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='Введите вашу дату рождения';
}
udate.onblur=function(){
if(this.validity.valueMissing){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Дата рождения не может быть пустой';
}else if(this.validity.valid){
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='Выбрана дата рождения';
}
}
</script>
</body>
</html>
Вот весь контент этой статьи, мы надеемся, что он поможет вам в изучении, и также надеемся на вашу поддержку и поддержку руководства по呐喊у.
Объявление: содержание этой статьи взято из Интернета, авторские права принадлежат их rightful владельцам, контент предоставлен пользователями Интернета, которые自发но сделали его доступным, сайт не обладает правами собственности, не производилось редактирование содержимого, и не несет ответственности за соответствующие юридические последствия. Если вы обнаружите подозрительное содержимое, связанное с нарушением авторских прав, пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (при отправке письма замените # на @) для сообщения о нарушении и предоставьте соответствующие доказательства. При обнаружении факта нарушения авторских прав сайт немедленно удаляет подозрительное содержимое.