English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Este exemplo compartilha H5Novas funcionalidades de validação de formulários, como como criar uma página de registro de usuário, para referência, o conteúdo específico é como segue
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">}}
<title>Página de formulário de registro de usuário</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>
<!--Novas características do elemento input-->
<form>
<!--Atributo e-mail-->
Tipo de e-mail<input type="email"/><br/>
<!--Atributo telefone-->
Tipo de telefone<input type="tel"/><br/>
<!--Atributo número-->
Tipo numérico<input type="number"/><br/>
<!--Atributo data-->
Tipo de data<input type="date"/><br/>
<!--Atributo mês-->
Tipo de mês<input type="month"/><br/>
<!--Atributo week-->
Tipo de período<input type="week"/><br/>
<!--Atributo range-->
Intervalo numérico<input type="range" min="18" max="60"/><br/>
<!--Atributo pesquisa-->
Tipo de pesquisa<input type="search"/><br/>
<!--Atributo cor-->
Seletor de cor<input type="color"/><br/>
<!--Atributo URL-->
Tipo de URL<input type="url"/><br/>
<input type='submit'/>
</form>
<hr/>
<div id="form_content">
<form action="">
<div class="dc"><h3>Página de registro de usuário</h3></div>
<div class="dc"><b>Apelido de usuário</b><input id="user" type="text" autofocus required pattern="^[0-9a-zA-Z]{6,10}$"/><p class="pc">Por favor, insira o nome de usuário</p></div>
<div class="dc"><b>Senha do usuário</b><input id="pwd" type="password" required pattern="^\w{8,12}$"/><p class="pc">Por favor, insira sua senha</p></div>
<div class="dc"><b>E-mail pessoal</b><input id="email" type="email" required/><p class="pc">Por favor, insira o seu e-mail</p></div>
<div class="dc"><b>Site pessoal</b><input id="url" type="url" required/><p class="pc">Por favor, insira o seu site pessoal (não obrigatório)</p></div>
<div class="dc"><b>Número de telefone</b><input id="tel" type="tel" required/><p class="pc">Por favor, insira o número de telefone</p></div>
<div class="dc"><b>Sua idade</b><input id="age" type="number" min="18" max="60" required/><p class="pc">Por favor, insira sua idade</p></div>
<div class="dc"><b>Data de nascimento</b><input id="date" type="date" required/><p class="pc">Por favor, selecione a data de nascimento</p></div>
<div class="dc"><input id="sub" type="submit" value="Submeter registro"/></div>
</form>
</div>
<script>
var uname = document.getElementById('user');
uname.onfocus = function() {
this.nextElementSibling.style.display='block';
8-12
}
if(this.validity.valid)
this.nextElementSibling.className='pc show_pass';
}
this.nextElementSibling.className='pc show_warn';
}
}
this.nextElementSibling.style.display='block';
6-12//
}
if(this.validity.valid)
this.nextElementSibling.className='pc show_pass';
else if(this.validity.valueMissing)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.className='pc show_warn';
}
}
this.nextElementSibling.style.display='block';
}
if(this.validity.valid) {
this.nextElementSibling.className = 'pc show_pass';
else if(this.validity.valueMissing)
this.nextElementSibling.className='pc show_warn';
}else if(this.validity.typeMismatch)
this.nextElementSibling.className='pc show_warn';
}
}
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='Por favor, insira sua página pessoal (opcional)';
}
url.onblur=function(){
if(this.validity.valid) {
this.nextElementSibling.className = 'pc show_pass';
this.nextElementSibling.innerHTML = 'O formato do URL é correto';
}else if(this.validity.typeMismatch)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='O formato do URL é inválido';
}
}
var uphone=document.getElementById('tel');
uphone.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='Por favor, insira o seu número de telefone de contato';
}
uphone.onblur=function(){
if(this.validity.valid)
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='O formato do número de telefone é correto';
else if(this.validity.valueMissing)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='O número de telefone não pode estar vazio';
}else if(this.validity.typeMismatch)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='O formato do número de telefone é inválido';
}
}
var uage=document.getElementById('age');
uage.onfocus=function(){
this.nextElementSibling.style.diplay='block';
this.nextElementSibling.innerHTML='Por favor, insira a sua idade';
}
uage.onblur=function(){
if(this.validity.valid)
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='A sua idade atende aos requisitos de registro';
}else if(this.validity.rangeOverflow)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='A sua idade é maior do que o intervalo de registro';
}else if(this.validity.rangeUnderflow)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='A sua idade é menor do que o intervalo de registro'
else if(this.validity.valueMissing)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='A idade não pode estar em branco';
}
}
var udate=document.getElementById('date');
udate.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='Por favor, insira sua data de nascimento';
}
udate.onblur=function(){
if(this.validity.valueMissing){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='A data de nascimento não pode estar em branco';
}else if(this.validity.valid){
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='Data de nascimento selecionada';
}
}
</script>
</body>
</html>
Isso é o conteúdo completo deste artigo, esperamos que ajude na aprendizagem de todos e que vocês apoiem fortemente o tutorial de gritaria.
Declaração: o conteúdo deste artigo é proveniente da Internet, pertence ao respectivo proprietário, é contribuído e carregado voluntariamente pelos usuários da Internet, o site não possui direitos de propriedade, não foi editado artificialmente e não assume responsabilidades legais relacionadas. Se você encontrar conteúdo suspeito de violação de direitos autorais, seja bem-vindo a enviar e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Caso seja confirmado, o site deletará imediatamente o conteúdo suspeito de infringência de direitos autorais).