English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Questa esempio condivide nuove funzionalità di validazione dei moduli H5, come creare una pagina di registrazione dell'utente, per la vostra riferimento, i dettagli sono elencati di seguito
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Pagina di registrazione dell'utente</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>
<!--nuove funzionalità del tag input-->
<form>
<!--proprietà email-->
Tipo di email<input type="email"/><br/>
<!--proprietà tel-->
Tipo di telefono<input type="tel"/><br/>
<!--proprietà number-->
Tipo di numero<input type="number"/><br/>
<!--proprietà date-->
Tipo di data<input type="date"/><br/>
<!--proprietà month-->
Tipo di mese<input type="month"/><br/>
<!--proprietà week-->
Tipo di periodo<input type="week"/><br/>
<!--proprietà range-->
Intervallo numerico<input type="range" min="18" max="60"/><br/>
<!--proprietà search-->
Tipo di ricerca<input type="search"/><br/>
<!--proprietà color-->
Selettore di colore<input type="color"/><br/>
<!--proprietà url-->
Tipo di sito web<input type="url"/><br/>
<input type='submit'/>
</form>
<hr/>
<div id="form_content">
<form action="">
<div class="dc"><h3>Pagina di registrazione utente</h3></div>
<div class="dc"><b>Soprannome utente</b><input id="user" type="text" autofocus required pattern="^[0-9a-zA-Z]{6,10}$"/><p class="pc">Inserisci il nome utente</p></div>
<div class="dc"><b>Parola d'accesso utente</b><input id="pwd" type="password" required pattern="^\w{8,12}$"/><p class="pc">Inserisci la password</p></div>
<div class="dc"><b>Email personale</b><input id="email" type="email" required/><p class="pc">Inserisci l'email</p></div>
<div class="dc"><b>Pagina personale</b><input id="url" type="url" required/><p class="pc">Inserisci la pagina personale (opzionale)</p></div>
<div class="dc"><b>Numero di telefono</b><input id="tel" type="tel" required/><p class="pc">Inserisci il numero di telefono</p></div>
<div class="dc"><b>La tua età</b><input id="age" type="number" min="18" max="60" required/><p class="pc">Inserisci la tua età</p></div>
<div class="dc"><b>Data di nascita</b><input id="date" type="date" required/><p class="pc">Seleziona la data di nascita</p></div>
<div class="dc"><input id="sub" type="submit" value="Invia registrazione"/></div>
</form>
</div>
<script>
var uname=document.getElementById('user');
uname.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='8-12 numeri o lettere';
}
uname.onblur=function(){
if(this.validity.valid)
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='Formato del nome utente corretto';
}
else if(this.validity.valueMissing) {
this.nextElementSibling.className = 'pc show_warn';
this.nextElementSibling.innerHTML = 'Il nome utente non può essere vuoto';
}else if(this.validity.patternMismatch){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Formato del nome utente non valido';
}
}
var upwd=document.getElementById('pwd');
upwd.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='Composto da 6-12 numeri/lettere/simboli inglesi';
}
upwd.onblur=function(){
if(this.validity.valid)
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='Formato della password corretto';
else if(this.validity.valueMissing)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='La password dell'utente non può essere vuota';
}else if(this.validity.patternMismatch){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Formato della password non valido';
}
}
var e_mail=document.getElementById('email');
e_mail.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='Inserisci il tuo email abituale';
}
e_mail.onblur=function(){
if(this.validity.valid) {
this.nextElementSibling.className = 'pc show_pass';
this.nextElementSibling.innerHTML = 'Formato email corretto';
else if(this.validity.valueMissing)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='L'email non può essere vuota';
}else if(this.validity.typeMismatch)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Formato email errato';
}
}
var url=document.getElementById('url');
url.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='Inserisci il tuo homepage personale (facoltativo)';
}
url.onblur=function(){
if(this.validity.valid) {
this.nextElementSibling.className = 'pc show_pass';
this.nextElementSibling.innerHTML = 'Il formato dell'indirizzo web è corretto';
}else if(this.validity.typeMismatch)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Il formato dell'indirizzo web è non valido';
}
}
var uphone=document.getElementById('tel');
uphone.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='Inserisci il tuo numero di telefono di contatto';
}
uphone.onblur=function(){
if(this.validity.valid)
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='Il formato del numero di telefono è corretto';
else if(this.validity.valueMissing)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Il numero di telefono non può essere vuoto';
}else if(this.validity.typeMismatch)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Il formato del numero di telefono è non valido';
}
}
var uage=document.getElementById('age');
uage.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='Inserisci la tua età';
}
uage.onblur=function(){
if(this.validity.valid)
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='La tua età corrisponde ai requisiti di registrazione';
}else if(this.validity.rangeOverflow)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='La tua età è superiore alla fascia di registrazione';
}else if(this.validity.rangeUnderflow)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='La tua età è inferiore alla fascia di registrazione'
else if(this.validity.valueMissing)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='L'età non può essere vuota';
}
}
var udate=document.getElementById('date');
udate.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='Inserisci la tua data di nascita';
}
udate.onblur=function(){
if(this.validity.valueMissing){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='La data di nascita non può essere vuota';
}else if(this.validity.valid){
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='Data di nascita selezionata';
}
}
</script>
</body>
</html>
Questo è tutto il contenuto dell'articolo, spero che sia utile per la tua apprendimento, e ti prego di supportare e urlare le lezioni.
Dichiarazione: il contenuto di questo articolo è stato prelevato da Internet, il copyright spetta ai rispettivi autori, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale. Se trovi contenuti sospetti di violazione del copyright, invia un'e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente il contenuto sospetto di violazione del copyright.