Impresiona aos teus visitantes web coa validación de formularios en tempo real

formulario en liña

A primeira impresión que normalmente tes como usuario dunha aplicación web é cando enches un formulario web. Sorpréndeme a cantidade de formularios web que teñen validación cero ou que esperan a que envíes o contido do formulario antes de dicirche que problemas podes ter.

A miña regra xeral é que todo o que non estea validado é compatible. Todo o que poida validarse antes de enviar o formulario debe selo. Coa chegada do Ajax, podes incluso validar os datos da túa base de datos antes de envialos. Non escolla a ruta preguiceira: os usuarios agradecen a axuda.

Aquí están algúns exemplos:

  1. Enderezos de correo electrónico - Non me importan os formularios que che fan encher o teu enderezo de correo electrónico dúas veces para validalos, pero o feito de que non che digan se coinciden ou non se constrúen adecuadamente é inexcusable.
  2. Contrasinais - Se me vas facer escribir un contrasinal dúas veces, valida que os valores sexan os mesmos antes de publicar o formulario.
  3. Seguridade da contrasinal - Se precisa unha certa intensidade do contrasinal (combinación de caracteres alfanuméricos ou maiúsculas e minúsculas), indíqueme algúns comentarios mentres escribo o meu contrasinal. Non espere a que o envíe antes de dicirme que fallou.
  4. Datas - Se desexa a data en formato am / d / aaaa, permítame introducir a información nun único campo escribindo eses valores e formatándoos adecuadamente. Se queres ceros ao principio, colócaos despois. Está ben amosar un formato e gardar outro na súa base de datos.
  5. Data de hoxe - Encheo por min! Por que me pides que complete a data na que xa a sabes ?!
  6. Formato de data - Se ten unha aplicación internacional, pode predeterminar un formato de data baseado na internacionalización da súa aplicación. Por suposto, é bo ter unha opción para que os usuarios anulen esa opción e seleccionen a súa.
  7. Números de seguridade social - é bastante sinxelo engadir algún javascript que salta automaticamente dun campo a outro ou por medio dun guión entre valores.
  8. Números de teléfono - Tendo en conta a internacionalización, este tipo de campos tamén se poden simplificar formattando o número de teléfono na interface, pero gardándoo noutro formato que sexa eficiente para o seu back-end. Non fagas que os teus usuarios escriban entre paréntesis, espazos e guións.
  9. Lonxitude máxima do texto - Se limitas o número de caracteres almacenados na túa base de datos, ¡NON me deixes escribir tantos caracteres! Nin sequera require unha validación difícil ... é só unha configuración na caixa de texto.
  10. Lonxitude mínima do texto - se precisa unha extensión mínima de texto, soe a alarma ata que teña suficientes caracteres.

Aquí tes un exemplo dunha función de intensidade do contrasinal Sabedoría friki:

Escribe o contrasinal:

ACTUALIZACIÓN: 10/26/2007 - Atopei un bo recurso cunha biblioteca JavaScript dispoñible para descargar validación de formulario, chamada LiveValidation.

16 Comentarios

  1. 1

    Estou de acordo en que son excelentes características para os formularios, pero dicir que é "inescusable" non realizar a validación de javascript frontal é unha opinión máis persoal. Encántame traballar en javascript e escribín unhas máscaras de edición bastante ordenadas para facer algunhas das cousas das que falas, pero moitas delas están lonxe de ser triviais e moitos dos paquetes de validación de formularios javascript que hai por aí teñen unha serie de grandes buracos. Non todos invertirán o tempo en duplicar a súa validación de back-end con (máis a miúdo) validación de javascript máis complexa.

    Puntos bos, pero definitivamente non é algo que todos os formularios en liña "necesitan" na miña opinión.

  2. 2

    O comprobador de contrasinais está relativamente roto. Calquera contrasinal é bo se é longo.

    Exemplo:

    ¿É realmente un contrasinal mediocre?

    f46dffe6ff4ffgdfgfjfgyu656hfdt74tyhdtu5674yfgh6uhhye45herdhrt64684hythdfth54y54348fgdcvzse8cn984v3p4m6vq98476m3wuw89ewfucsd8fg67s4v8tw76u340m6tver7nt+s89346vs+0em9u+s+09hrtuhss586ysvne4896vb4865tbv089rt++

  3. 4

    Para min, a mellor validación de formulario é cando lle dá ao usuario a impresión dunha validación do lado do cliente mentres é validación AJAX / do servidor.
    Simplemente tes que engadir aos elementos do teu formulario algún tratamento de eventos (teclado, desenfoque, clic, etc ...) que publique todo o formulario vía AJAX no servidor, invocando unha función "comprobar" que devolva as mensaxes de erro correspondentes (esta clave tamén é sinxelo, esa data ten un formato incorrecto, etc ...)
    Cando o usuario finalmente publica o formulario facendo clic nun botón Enviar, aínda pode usar a función "comprobar" do lado do servidor para validar por última vez o formulario antes de inserir os datos nunha base de datos ou noutro proceso.
    Deste xeito, os usuarios están satisfeitos coa validación onthego E os desenvolvedores están satisfeitos co desenvolvemento de validación só no lado do servidor.

    • 5
      • 6

        Non tan rápido Doug: estou de acordo coa túa premisa orixinal de que estas funcións útiles, como o formato dun SSN sobre a marcha, son triviais. E é preguiceiro publicar unha mensaxe que está mal, cando podes solucionalo sen ter que adiviñar o formato.

        Non obstante, tamén estou de acordo con Nicolas sobre o uso da lóxica do lado do servidor xunto con AJAX.

  4. 7

    O teu título di "Impresiona aos teus amigos ..." pero non me impresionas con este 2 minutos chamado por correo.

    Volve escribir o teu título (demasiado enganoso, fai pensar que hai exemplos e prácticas que se están a discutir).

    Se a xente non o fai xa nos seus formularios, só están aprendendo ou o formulario non é o suficientemente importante como para usar a validación.

    Os verdadeiros programadores web xa o saben e fano.

    • 8

      Jay,

      Síntoo! O meu punto era definitivamente non proporcionar comentarios aos desenvolvedores; realmente viña desde o punto de vista dun xestor de produtos. Estou de acordo contigo, pero é interesante que outros desenvolvedores non o fagan. Creo que é lamentable.

      Grazas por tomarte o tempo.
      Doug

  5. 9

    Estou totalmente de acordo en que a validación é un compoñente necesario de calquera aplicación. Como líder de equipo, normalmente atópome enviando código de novo para estar "rematado" por motivos como a falta de validacións ou a restrición das lonxitudes de entrada de texto.

    Na maioría das cousas nas que traballo, creo que leva aproximadamente o 50% do tempo traballar algo, en condicións normais e se os usuarios usan o sistema do xeito que eu pretendía. O outro 50% do tempo de desenvolvemento vén de comprobar a súa entrada, garantir que se mantén a integridade dos datos e facer que os campos do formulario non permitan a entrada de datos maliciosos.

    Escribín unha publicación sobre como uso InputVerifiers nas miñas aplicacións de hava swing e mostro como verifique un campo de texto de correo electrónico. A expresión regular que uso é facilmente modificable para validar números de teléfono, códigos postais, SSN, etc.

    A miña publicación do blogue está en http://timarcher.com/?q=node/36

    Boa redacción Doug!

  6. 10

    Estou de acordo. Os contrasinais son realmente importantes e hai que tomalos en serio. Creo que é normal que case todos os formularios escriban o contrasinal dúas veces, pero non mostrar a validez dos dous contrasinais demostra que non se está a considerar seriamente.

  7. 11

    Estou de acordo en que a validación do cliente pode ser unha característica moi fácil de usar. Non obstante, é máis importante asegurarse de que as propias validacións teñen realmente sentido.

    Proporcionou un brillante exemplo de como a validación pode enganar aos usuarios e, peor aínda, afastalos do noso sitio:

    Validación da forza do contrasinal de Geek Wisdom desde consideracións tZhKwnUmIss para ser un contrasinal débil. Non só é un contrasinal perfectamente forte, senón que tamén afastará aos usuarios porque lles dá a falsa impresión de que iniciar sesión no seu sitio usando este contrasinal será dalgún xeito inseguro.

    Sería moito mellor (e máis doado) insinuar aos usuarios que un bo contrasinal ten polo menos seis caracteres e debe conter tanto números como letras.

    Outras validacións cuestionables inclúen nomes de usuario que precisan unha lonxitude mínima determinada ou que non conteñan espazos. Que pasa cos nomes de usuario X, John Doe, ou mesmo # *! §? Podo manexalo.

  8. 12

    Estou dacordo contigo. Algúns formularios teñen un bo aspecto, pero non ofrecen unha boa validación. A información persoal ofrécese e só é axeitada tomala en serio, como calquera formulario comercial en papel.

  9. 13
  10. 14
  11. 15

    Paréceme un pouco divertido que publiques sobre a bondade de proporcionar unha validación de formulario en tempo real e, con todo, o teu formulario de comentarios na parte inferior da publicación non ofrece ningún destes ...

    Doume conta de que estás a usar WordPress para publicar os teus pensamentos en internet, pero quizais garantir que practiques o que predicas tampouco é unha mala idea. 🙂

    Unha boa publicación, por certo, aínda que non necesariamente estou de acordo con todo o que escribiches.

    • 16

      Doh! Vostede me rebentou, Amanda! Gustaríame ter tempo para facer unha mellor validación de formularios e integrala en WordPress. Gústame especialmente o Adobe Spry marco de validación e encantaríame ver a alguén integrar os dous.

      Grazas! (E sempre agradezo que haxa múltiples opinións sobre calquera tema).
      Doug

¿Que pensas?

Este sitio usa Akismet para reducir o spam. Aprende a procesar os teus datos de comentarios.