English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Este ejemplo comparte con ustedes H5Nuevas características de validación de formularios, cómo crear una página de registro de usuarios, a continuación se detalla
<!DOCTYPE html>
<html>
<head lang="es">
<meta charset="UTF-8">-8">
<título>Página de formulario de registro de usuarios</título>
<style>
#form_content{
width:600px;
margen:0 auto;
position:absolute;
left:400px;
}
#form_content .dc{
width:600px;
margen-top:10px;
overflow:hidden;
}
#form_content .dc h3{
texto-alineación:centro;
}
#form_content b{
display:inline-block;
height:40px;
línea-height: 40px;
margen-left:20px;
}
#form_content input{
display:inline-block;
height:34px;
width:200px;
borde-radio:2px;
margen-left:60px;
relleno-left:10px;
}
.pc{
width:200px;
height:40px;
flotar:right;
línea-height:40px;
texto-alineación:centro;
margen:0 20px 0;
background:#333;
color:#fff;
fuente-peso:bold;
borde-radio:8px;
display:none;
}
input#sub{
display:inline-block;
width:215px;
background:#f0f;
margen-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>
<!--Nuevas características del etiqueta input-->
<form>
<!--Atributo email-->
Tipo de correo electrónico<input type="email"/><br/>
<!--Atributo tel-->
Tipo de teléfono<input type="tel"/><br/>
<!--Atributo number-->
Tipo numérico<input type="number"/><br/>
<!--Atributo date-->
Tipo de fecha<input type="date"/><br/>
<!--Atributo month-->
Tipo de mes<input type="month"/><br/>
<!--Atributo week-->
Tipo de ciclo<input type="week"/><br/>
<!--Atributo range-->
Rango numérico<input type="range" min="18" max="60"/><br/>
<!--Atributo search-->
Tipo de búsqueda<input type="search"/><br/>
<!--Atributo color-->
Selector de color<input type="color"/><br/>
<!--Atributo url-->
Tipo de sitio web<input type="url"/><br/>
<input type='submit'/>
</form>
<hr/>
<div id="form_content">
<form action="">
<div class="dc"><h3>Página de registro de usuario</h3></div>
<div class="dc"><b>Nombre de usuario</b><input id="user" type="text" autofocus required pattern="^[0-9a-zA-Z}{6,10}$"/><p class="pc">Por favor, introduzca el nombre de usuario</p></div>
<div class="dc"><b>Contraseña de usuario</b><input id="pwd" type="password" required pattern="^\w{8,12}$"/><p class="pc">Por favor, introduzca la contraseña</p></div>
<div class="dc"><b>Correo personal</b><input id="email" type="email" required/><p class="pc">Por favor, introduzca el correo electrónico</p></div>
<div class="dc"><b>Pagina personal</b><input id="url" type="url" required/><p class="pc">Por favor, introduzca la página personal (no es obligatorio)</p></div>
<div class="dc"><b>Numero de telefono</b><input id="tel" type="tel" required/><p class="pc">Por favor, introduzca el número de teléfono</p></div>
<div class="dc"><b>Su edad</b><input id="age" type="number" min="18" max="60" required/><p class="pc">Por favor, introduzca su edad</p></div>
<div class="dc"><b>Fecha de nacimiento</b><input id="date" type="date" required/><p class="pc">Por favor, seleccione la fecha de nacimiento</p></div>
<div class="dc"><input id="sub" type="submit" value="Enviar 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, ingrese su página personal (opcional)';
}
url.onblur=function(){
if(this.validity.valid) {
this.nextElementSibling.className = 'pc show_pass';
this.nextElementSibling.innerHTML = 'El formato de la dirección web es correcto';
}else if(this.validity.typeMismatch)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='El formato de la dirección web es ilegal';
}
}
var uphone=document.getElementById('tel');
uphone.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='Por favor, ingresa tu número de contacto';
}
uphone.onblur=function(){
if(this.validity.valid){
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='El formato del número de teléfono es correcto';
else if(this.validity.valueMissing)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='El número de teléfono no puede estar vacío';
}else if(this.validity.typeMismatch)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='El formato del número de teléfono es ilegal';
}
}
var uage=document.getElementById('age');
uage.onfocus=function(){
this.nextElementSibling.style.diplay='block';
this.nextElementSibling.innerHTML='Por favor, ingresa tu edad';
}
uage.onblur=function(){
if(this.validity.valid){
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='Tu edad cumple con los requisitos de registro';
}else if(this.validity.rangeOverflow)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Tu edad es mayor que el rango de registro';
}else if(this.validity.rangeUnderflow)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Tu edad es menor que el rango de registro'
else if(this.validity.valueMissing)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='La edad no puede estar vacía';
}
}
var udate=document.getElementById('date');
udate.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='Por favor, ingrese su fecha de nacimiento';
}
udate.onblur=function(){
if(this.validity.valueMissing){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='La fecha de nacimiento no puede estar vacía';
}else if(this.validity.valid){
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='Fecha de nacimiento seleccionada';
}
}
</script>
</body>
</html>
Esto es todo el contenido de este artículo, espero que sea útil para su aprendizaje y que todos los demás apoyen el tutorial de grito.
Declaración: el contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha procesado editorialmente y no asume ninguna responsabilidad legal. Si encuentra contenido sospechoso de copyright, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, por favor reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.