martes, 10 de febrero de 2015

VALIDACIÓN DE FORMULARIOS

Primera plantilla

Visualización


Js 


function validacion(formulario)

{
//Creamos una variable y asignamos una expresión regular que indica que sólo se podrán introducir nueve dígitos en este campo
var regular_telefono=/^\d{9}$/;  
//ahora una para cinco dígitos
var regular_cp=/^\d{5}$/
//y una para caracteres alfabéticos en minúscula o mayúscula
var regular_nombre=/^[A-Za-z]{3,15}$/
var regular_apellido=/^[A-Za-záéíóúñ]{2,}([\s][A-Za-záéíóúñ]{2,})+$/
//entre 15 y 150 caracteres
var regular_mensajetext=/^[A-Za-z]{5,150}$/
if (regular_telefono.test(formulario.tele.value)==false)
{
formulario.tele.style.border="red 3px solid"
window.alert("Introduzca nueve dígitos")
document.formulario.tele.focus()
return false
}
if (regular_cp.test(formulario.cp.value)==false)
{
formulario.cp.style.border="red 3px solid"
window.alert("Código postal no válido")
document.formulario.cp.focus()
return false
}
if (regular_nombre.test(formulario.minombre.value)==false)
{
formulario.minombre.style.border="red 3px solid"
window.alert("Introduzca caracteres alfabéticos")
document.formulario.minombre.focus()
return false
}
if (regular_apellido.test(formulario.apelli.value)==false)
{
formulario.apelli.style.border="red 3px solid"
window.alert("Introduzca caracteres alfabéticos")
document.formulario.apelli.focus()
return false
}
if (regular_mensajetext.test(formulario.mensa.value)==false)
{
formulario.mensa.style.border="red 3px solid"
window.alert("Introduzca entre cinco y ciento cincuenta caracteres")
document.formulario.mensa.focus()
return false
}
window.alert("El formulario se rellenó correctamente")
return true
}

Html


<!DOCTYPE html>
<html dir="ltr" lang="es"><head><!-- Created by Artisteer v4.0.0.58475 -->
    <meta charset"utf-8" />
    <title>Contacts</title>
    <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">

    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <link rel="stylesheet" href="style.css" media="screen">
    <!--[if lte IE 7]><link rel="stylesheet" href="style.ie7.css" media="screen" /><![endif]-->
    <link rel="stylesheet" href="style.responsive.css" media="all">


     <script src="mijs.js"></script>
    <script src="jquery.js"></script>
    <script src="script.js"></script>
    <script src="script.responsive.js"></script>
<meta name="description" content="Description">
<meta name="keywords" content="Keywords">



<style>.art-content .art-postcontent-0 .layout-item-0 { padding-right: 10px;padding-left: 10px;  }
.ie7 .post .layout-cell {border:none !important; padding:0 !important; }
.ie6 .post .layout-cell {border:none !important; padding:0 !important; }

</style></head>
<body>
<div id="art-main">
<nav class="art-nav clearfix">
    <ul class="art-hmenu"><li><a href="inicio.html">Inicio</a></li><li><a href="contacts.html" class="active">Contacts</a></li></ul> 
    </nav>
<header class="art-header clearfix">


    <div class="art-shapes">
<h1 class="art-headline" data-left="50%">
    <a href="#">Introduzca Título del Sitio</a>
</h1>
<h2 class="art-slogan" data-left="50%">Introduzca Eslogan del Sitio</h2>


            </div>

                
                    
</header>
<div class="art-sheet clearfix">
            <div class="art-layout-wrapper clearfix">
                <div class="art-content-layout">
                    <div class="art-content-layout-row">
                        <div class="art-layout-cell art-content clearfix"><article class="art-post art-article">
                                <div class="art-postmetadataheader">
                                        <h2 class="art-postheader">Contacts</h2>
                                                            
                                    </div>
                                <div class="art-postcontent art-postcontent-0 clearfix"><div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-0" style="width: 100%" >
        <p>Eros sit pretium phasellus lorem massa volutpat risus.  Suspendisse nunc dapibus curabitur et metus nulla ipsum  eu turpis gravida adipiscing a ut quis vestibulum est.</p><p>Quis nullam cras quis ornare ut mi libero pellentesque amet augue. Ut velit condimentum varius. Et auctor sem eget interdum urna aliquet nec donec vitae posuere.  Aliquam donec id eleifend arcu pellentesque. </p><p style="font-weight:bold;">Laoreet id.</p><p>Sit felis vel dapibus mollis. <br>  Principal Ciudad, Country 12345-6789</p><p>Et adipiscing quis.<br>  Fusce eget leo vel.</p><p>A. <a href="#">http://www.domain.com<br></a>A. <a href="#">email@domain.com</a></p>
    
        <div id="tabla">
  <form name="formulario" onsubmit=" return validacion(this)">
   <p></p>
   <table id="borde" width="432" border="0">
     <tr>
       <td>*Nombre:</td>
       <td>&nbsp;</td>
       <td>*Apellidos:</td>
        </tr>
     <tr>
       <td width="461"><input type="text" name="minombre" required autofocus/></td>
       <td width="42">&nbsp;</td>
       <td width="415"><input type="text" name="apelli" required/></td>
        </tr>
     <tr>
       <td>*Email:</td>
       <td>&nbsp;</td>
       <td>Tel&eacute;fono:</td>
        </tr>
     <tr>
       <td><input type="email" required/></td>
       <td>&nbsp;</td>
       <td><input name="tele" value="" type="text"/></td>
        </tr>
     <tr>
       <td>*Direcci&oacute;n:</td>
       <td>&nbsp;</td>
       <td>*C&oacute;digo postal:</td>
        </tr>
     <tr>
       <td><input type="text" required/></td>
       <td>&nbsp;</td>
       <td><input name="cp" value="" type="text" required/></td>
        </tr>
     <tr>
       <td colspan="3">*Mensaje:</td>
        </tr>
     <tr>
       <td colspan="3"><textarea name="mensa" cols="30" rows="10" required></textarea></td>
        </tr>
      </table>
   <p>&nbsp;</p>
    
  <input type="submit" value"Enviar"/>
  </form>
    </div>
    
    
        </div>
    </div>
</div>
</div>
                                
                </article></div>
                        <div class="art-layout-cell art-sidebar1 clearfix"><div class="art-vmenublock clearfix">
        <div class="art-vmenublockheader">
            <h3 class="t">Vertical Menu</h3>
        </div>
        <div class="art-vmenublockcontent">
<ul class="art-vmenu"><li><a href="inicio.html">Inicio</a></li><li><a href="contacts.html" class="active">Contacts</a></li></ul>
                
        </div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Reasons to Travel Green</h3>
        </div>
        <div class="art-blockcontent"><ol><li>In ante  diam lacus eget rutrum ultricies ultricies.  <a href="#">more</a></li><li>Tempus nisi integer fusce primis mattis ligula ante ipsum.  <a href="#">more</a></li><li>Vestibulum ipsum mi.  Netus maecenas sociis. <a href="#">more</a></li><li>Montes sagittis praesent nec ultricies volutpat ut nunc.  <a href="#">more</a></li><li>Sem at pellentesque euismod justo.  <a href="#">more</a></li><li>Mi nunc magna blandit id pulvinar gravida ac lacus egestas quam. <a href="#">more</a></li></ol></div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Quick Links</h3>
        </div>
        <div class="art-blockcontent"><p><a href="#">Suspendisse pharetra auctor</a></p><p><a href="#">Nunc a sollicitudin est</a></p><p><a href="#">Lobortis sit purus dapibus nunc at.</a></p><p><a href="#">Tellus nullam pede nunc amet. </a></p><p><a href="#">Fusce eget curae tempus odio. </a></p></div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Follow Us</h3>
        </div>
        <div class="art-blockcontent"><p><img width="60" height="60" alt="" src="images/1311950644_facebook.png"><img width="60" height="60" alt="" src="images/1311950637_flickr.png"><img width="60" height="60" alt="" src="images/1311950634_rss.png"></p></div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Photo Gallery</h3>
        </div>
        <div class="art-blockcontent"><p><img width="205" height="136" alt="" src="images/shutterstock_12843229.jpg" style="margin:0;"></p></div>
</div></div>
                    </div>
                </div>
            </div><footer class="art-footer clearfix">
<p><span style="font-size:13px;"><span style="font-weight:bold;">Fusce et sapien.<a href="#">Privacy Policy</a><span style="font-size:11px;">|</span></span></span>Icono <a href="http://www.iconfinder.com/browse/iconset/web2badges/#readme">set</a> A.<a href="http://www.soulvisual.com/blog/">Jeremy Roux</a></p><p><br></p>
</footer>

    </div>
    <p class="art-page-footer">
        <span id="art-footnote-links"><a href="http://www.artisteer.com/" target="_blank">Web Template</a> created with Artisteer.</span>
    </p>
</div>


</body></html>

Segunda plantilla

Visualización


Js

function validarnombre(){ //De tres a cinco caracteres en mayúscula o minúsculavar validanombre=/^[A-Za-z]{3,15}$/
if (validanombre.test(formulario.minombre.value)==false) { //Si no es correcto,el recuadro del input pasará a ser rojo formulario.minombre.style.border="red 3px solid" window.alert(" El nombre de usuario debe ser entre tres y quince letras") document.formulario.minombre.focus() return false }     //Si es correcto, pasará a ser verde else { formulario.minombre.style.border="green 3px solid" return true }

}
function validarcontraseña(){ //Se admitirán en mayúsculas o minúsculas de 3 a 8 caracteres y posteriormente números opcionalesvar validacontraseña=/^[A-Za-z]{3,8}\d?$/
if (validacontraseña.test(formulario.contra.value)==false) { //Si no es correcto,el recuadro del input pasará a ser rojo formulario.contra.style.border="red 3px solid" window.alert(" El nombre de usuario debe ser entre tres y ocho letras, los dígitos son opcionales") document.contra.minombre.focus() return false } //Si es correcto, pasará a ser verde else { formulario.contra.style.border="green 3px solid" return true }

}function validacion(){        var uno= validarnombre() var dos= validarcontraseña() //Si ambas funciones devuelven true, saldrá éste mensaje if (uno==true&&dos==true) { window.alert("Gracias por rellenar correctamente el formulario") return true }}

Html

<!DOCTYPE html>
<html dir="ltr" lang="es"><head><!-- Created by Artisteer v4.0.0.58475 -->
    <meta charset"utf-8" />
    <title>Contacts</title>
    <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <link rel="stylesheet" href="style.css" media="screen">
    <!--[if lte IE 7]><link rel="stylesheet" href="style.ie7.css" media="screen" /><![endif]-->
    <link rel="stylesheet" href="style.responsive.css" media="all">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arimo&amp;subset=latin">
    <script src="mijs.js"></script>
    <script src="jquery.js"></script>
    <script src="script.js"></script>
    <script src="script.responsive.js"></script>
<meta name="description" content="Description">
<meta name="keywords" content="Keywords">



<style>.art-content .art-postcontent-0 .layout-item-0 { padding-right: 10px;padding-left: 10px;  }
.ie7 .post .layout-cell {border:none !important; padding:0 !important; }
.ie6 .post .layout-cell {border:none !important; padding:0 !important; }
</style></head>
<body>
<div id="art-main">
<header class="art-header clearfix">

    <div class="art-shapes">
<div class="art-textblock art-object165573267" data-left="100%">
        <div class="art-object165573267-text"><p style="color: #511200; font-size:19px;font-family:Arimo, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;font-weight:normal;font-style:normal;text-decoration:none">Welcome To Our Site</p><p style="color: #380C00; font-size:14px;font-family:Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;text-decoration:none">Hello and Welcome.</p><p style="font-size:14px;font-family:Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;text-decoration:none"><a style="color: #511200" href="#">More →</a></p></div>
   
</div>
            </div>
<nav class="art-nav clearfix">
    <ul class="art-hmenu"><li><a href="inicio.html">Inicio</a></li><li><a href="contacts.html" class="active">Contacts</a></li></ul>
    </nav>
                   
</header>
<div class="art-sheet clearfix">
            <div class="art-layout-wrapper clearfix">
                <div class="art-content-layout">
                    <div class="art-content-layout-row">
                        <div class="art-layout-cell art-sidebar1 clearfix"><div class="art-vmenublock clearfix">
        <div class="art-vmenublockheader">
            <h3 class="t">Vertical Menu</h3>
        </div>
        <div class="art-vmenublockcontent">
<ul class="art-vmenu"><li><a href="inicio.html">Inicio</a></li><li><a href="contacts.html" class="active">Contacts</a></li></ul>
               
        </div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Reasons to Travel Green</h3>
        </div>
        <div class="art-blockcontent"><ol><li>In ante  diam lacus eget rutrum ultricies ultricies.  <a href="#">more</a></li><li>Tempus nisi integer fusce primis mattis ligula ante ipsum.  <a href="#">more</a></li><li>Vestibulum ipsum mi.  Netus maecenas sociis. <a href="#">more</a></li><li>Montes sagittis praesent nec ultricies volutpat ut nunc.  <a href="#">more</a></li><li>Sem at pellentesque euismod justo.  <a href="#">more</a></li><li>Mi nunc magna blandit id pulvinar gravida ac lacus egestas quam. <a href="#">more</a></li></ol></div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Photo Gallery</h3>
        </div>
        <div class="art-blockcontent"><p><img width="205" height="136" alt="" src="images/shutterstock_12843229.jpg" style="margin:0;"></p></div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Follow Us</h3>
        </div>
        <div class="art-blockcontent"><p><img width="60" height="60" alt="" src="images/1311950644_facebook.png"><img width="60" height="60" alt="" src="images/1311950637_flickr.png"><img width="60" height="60" alt="" src="images/1311950634_rss.png"></p></div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Quick Links</h3>
        </div>
        <div class="art-blockcontent"><p><a href="#">Suspendisse pharetra auctor</a></p><p><a href="#">Nunc a sollicitudin est</a></p><p><a href="#">Lobortis sit purus dapibus nunc at.</a></p><p><a href="#">Tellus nullam pede nunc amet. </a></p><p><a href="#">Fusce eget curae tempus odio. </a></p></div>
</div></div>
                        <div class="art-layout-cell art-content clearfix"><article class="art-post art-article">
                                <div class="art-postmetadataheader">
                                        <h2 class="art-postheader"><span class="art-postheadericon">Contacts</span></h2>
                                    </div>
                                               
                <div class="art-postcontent art-postcontent-0 clearfix"><div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-0" style="width: 100%" >
        <p>Eros sit pretium phasellus lorem massa volutpat risus.  Suspendisse nunc dapibus curabitur et metus nulla ipsum  eu turpis gravida adipiscing a ut quis vestibulum est.</p><p>Quis nullam cras quis ornare ut mi libero pellentesque amet augue. Ut velit condimentum varius. Et auctor sem eget interdum urna aliquet nec donec vitae posuere.  Aliquam donec id eleifend arcu pellentesque. </p><p style="font-weight:bold;">Laoreet id.</p><p>Sit felis vel dapibus mollis. <br>  Principal Ciudad, Country 12345-6789</p><p>Et adipiscing quis.<br>  Fusce eget leo vel.</p><p>A. <a href="#">http://www.domain.com<br></a>A. <a href="#">email@domain.com</a></p>
   
        <div id="tabla">
   <form name="formulario" onsubmit=" return validacion()">
   <p></p>
   <table id="borde" width="432" border="0">
     <tr>
       <td>*Usuario:</td>
       <td colspan="2">*Contraseña:</td>
     
        </tr>
     <tr>
       <td width="144"><input type="text" name="minombre" value="" required autofocus  onblur="validarnombre()"/></td>
       <td colspan="2"><input type="password" name="contra" value="" onblur="validarcontraseña()" required/></td>
     
        </tr>
      </table>
   <p>&nbsp;</p>
   
  <input type="submit" value"Enviar"/>
  </form>
    </div>
   
        </div>
    </div>
</div>
</div>
                               
                </article></div>
                        <div class="art-layout-cell art-sidebar2 clearfix"><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Search</h3>
        </div>
        <div class="art-blockcontent"><div>
  <form action="#" class="art-search" method="get" name="searchform">
    <input type="text" value="" name="s" />
    <input type="submit" value="Search" name="search" class="art-search-button" />
  </form>
</div></div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Categories</h3>
        </div>
        <div class="art-blockcontent"><div>
  <p>Lorem ipsum dolor sit amet. Nam sit amet sem. Mauris a ante.</p>
  <ul>
    <li>
      <a href="#" title="All News">All News</a> (50)
    </li>
    <li>
      <a href="#" title="Best of the Year">Best of the Year</a> (4)
    </li>
    <li>
      <a href="#" title="Hyperlink">Hyperlink</a> (24)
    </li>
    <li>
      <a href="#" title="Visited link" class="visited">Visited link</a> (17)
    </li>
    <li>
      <a href="#" title="Hovered link" class="hover">Hovered link</a> (6)
    </li>
  </ul>
</div></div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Archives</h3>
        </div>
        <div class="art-blockcontent"><div>
  <ul>
    <li>
      <a href="#" title="November 2008">November 2008</a>
    </li>
    <li>
      <a href="#" title="October 2008">October 2008</a>
    </li>
    <li>
      <a href="#" title="September 2008">September 2008</a>
    </li>
    <li>
      <a href="#" title="June 2008">June 2008</a>
    </li>
  </ul>
</div></div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Blogroll</h3>
        </div>
        <div class="art-blockcontent"><div>
  <ul>
    <li>
      <a href="#">My first blog</a>
    </li>
    <li>
      <a href="#">Who will prevail?</a>
    </li>
    <li>
      <a href="#">Stay positive!</a>
    </li>
    <li>
      <a href="#">Oil still going up</a>
    </li>
    <li>
      <a href="#">Gripes and Grins</a>
    </li>
    <li>
      <a href="#">2012 Olympics</a>
    </li>
    <li>
      <a href="#">How to SEO</a>
    </li>
    <li>
      <a href="#">On Global Warming</a>
    </li>
    <li>
      <a href="#">Can you guess?</a>
    </li>
  </ul>
</div></div>
</div></div>
                    </div>
                </div>
            </div><footer class="art-footer clearfix">
<p><span style="font-size:13px;"><span style="font-weight:bold;">Fusce et sapien.<a href="#">Privacy Policy</a><span style="font-size:11px;">|</span></span></span>Icono <a href="http://www.iconfinder.com/browse/iconset/web2badges/#readme">set</a> A.<a href="http://www.soulvisual.com/blog/">Jeremy Roux</a></p><p><br></p>
</footer>
    </div>
    <p class="art-page-footer">
        <span id="art-footnote-links"><a href="http://www.artisteer.com/" target="_blank">Web Template</a> created with Artisteer.</span>
    </p>
</div>

</body></html>
Publicado por en
Etiquetas:

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)

analytics