Auditoria

INDICE TOC o 1-5 h z u HYPERLINK l _Toc400451023 Introduccin Qu vamos a hacer PAGEREF _Toc400451023 h 1 HYPERLINK l _Toc400451024 Paso 1 La estructura PAGEREF _Toc400451024 h 1 HYPERLINK l _Toc400451025 Paso 2 Aadiendo un poco de estilo con CSS PAGEREF _Toc400451025 h 2 HYPERLINK l _Toc400451026 Paso 3 Validando en el lado del cliente con Javascript (jQuery) PAGEREF _Toc400451026 h 5HYPERLINK l _Toc400451027 Document ready y variables de referencia PAGEREF _Toc400451027 h 6 HYPERLINK l _Toc400451028 Funciones de validacin PAGEREF _Toc400451028 h 6 HYPERLINK l _Toc400451029 Llamando a las funciones de validacin en los eventos PAGEREF _Toc400451029 h 8 HYPERLINK l _Toc400451030 Paso 4 Validando en el lado del servidor con PHP PAGEREF _Toc400451030 h 9 HYPERLINK l_Toc400451031 Funciones de validacin mediante PHP PAGEREF _Toc400451031 h 9 HYPERLINK l _Toc400451032 Mezclando las dos partes en una sla PAGEREF _Toc400451032 h 10 HYPERLINK l _Toc400451033 Cmo pruebo slo el lado del servidor PAGEREF _Toc400451033 h 12 HYPERLINK l _Toc400451034 Reflexin final PAGEREF _Toc400451034 h 12 Introduccin Qu vamos a hacer AL da de hoy a nadie se le escapa que HYPERLINKhttp//web.ontuts.com/tag/javascript/ Javascriptest jugando un papel bastante importante en lainteraccinyusabilidadde los sitios web. Procesoscomo el registro de un nuevo usuario son cada vez msinteractivosy ofrecen multitud de tips / consejos, avisos y otros tipo de alertas antes de que la pgina se recargue al pinchar en enviar. Muchas de estas comprobaciones saber si un nombre de usuario yaexiste, si la contrasea cumple los requisitos, si un e-mail es correcto, etc se comprueban medianteJavascript. As pues nosotros trataremos devalidar un formulariocon los siguientes campos a validar Nombre de usuario Contrasea E-mail Sitio Web (Opcional) Los requisitos para cada campo los analizaremos con calma en los siguientes pasos del tutorial, pero como habris visto todos sern obligatorios salvo elsitio web, que lo consideraremos opcional. Paso 1 La estructura Como en otras ocasiones, la estructura del documento no ser excesivamente importante, ya que lo importante ser conocer las formas de validacin del formulario, pero vamos a tratar de hacer algo vistoso para nuestro ejemplo. Simple pero funcionalDOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//ENhttp//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd htmlxmlnshttp//www.w3.org/1999/xhtmldirltrlanges-ES head metahttp-equivContent-Typecontenttext/htmlcharsetUTF-8/ titleCmovalidarunformularioutilizandoPHPyJavascript(jQuery)Web.Ontuts/title linkrelstylesheethrefmain.csstypetext/cssmediascreen/ /head body divclasswrapper divclasssection phpif(isset(status)) h1FormulariodevalidacinenClienteServidor/h1formidform1actionindex.phpmethodpost labelforusernameNombredeusuario(spanidreq-usernameclassrequisitesphpechousernameA-z,mnimo4caracteres/span)/label inputtabindex1nameusernameidusernametypetextclasstextphpechousernamevaluep-
hpechousernameValue/ labelforpassword1Contrasea(spanidreq-password1classrequisitesphpechopassword1Mnimo5caracteres,mximo12caracteres,letrasynmeros/span)/labelinputtabindex2namepassword1idpassword1typepasswordclasstextphpechopassword1value/ labelforpassword2RepetirContrasea(spanidreq-password2classrequisitesphpechopassword2Debeserigualalaanterior/span)/label inputtabindex3namepassword2idpassword2typepasswordclasstextphpechopassword2value/ labelforemailE-mail(spanidreq-emailclassrequisitesphpechoemailUne-mailvlidoporfavor/span)/labelinputtabindex4nameemailidemailtypetextclasstextphpechoemailvaluephpechoema-
ilValue/ labelforwebsiteSitioWeb(Opcional)/label inputtabindex5namewebsiteidwebsitetypetextclasstextvaluephpechowebsiteValu-
e/ div inputtabindex6namesendidsendtypesubmitclasssubmitvalueEnviarformulario/ /div /form phpelse h1Formularioenviadoconxito/h1 phpendif /div /div scripttypetext/javascriptsrcjquery.js/script scripttypetext/javascriptsrcmain.js/script /body /html Para los ms...