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, incluso pode validar os datos da sú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 son 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úns javascript que saltan automaticamente dun campo a outro ou poñen un 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 con esas son excelentes funcións para os formularios, pero dicir que é "inescusable" non realizar a validación de Javascript front-end é unha opinión máis persoal. Encántame traballar en javascript e escribín unhas máscaras de edición moi boas 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 de javascript que existen teñen unha serie de grandes ocos. Non todos invertirán tempo en duplicar a súa validación de back-end con (a maioría das veces) unha validación de javascript front-end máis complexa.

    Bos puntos, 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 é suficientemente bo se é longo.

    Exemplo:

    É realmente un contrasinal mediocre?

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

  3. 4

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

    • 5
      • 6

        Doug non tan rápido: 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 é incorrecta, 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 estes 2 minutos que me chamaron por teléfono.

    Reescribe o teu título (demasiado enganoso, fai pensar que hai exemplos e prácticas que se discuten).

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

    Os programadores web reais xa o saben e fano.

    • 8

      Jay,

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

      Grazas por dedicar o tempo!
      Doug

  5. 9

    Estou totalmente de acordo en que a validación é un compoñente necesario de calquera aplicación. Como xefe de equipo, adoito devolver o código para que estea "acabado" por razóns como falta de validacións ou restrinxir a lonxitude de entrada de texto.

    Para a maioría das cousas nas que traballo creo que leva preto do 50% do tempo conseguir que algo funcione, en condicións normais e se os usuarios usan o sistema como eu pretendía. O outro 50% do tempo de desenvolvemento provén de comprobar a súa entrada, de garantir a integridade dos datos e de facer que os campos do formulario non permitan introducir datos maliciosos.

    Escribín unha publicación sobre como uso InputVerifiers nas miñas aplicacións de hava swing e mostro como verifico 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 postales, SSN, etc.

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

    Boa escrita Doug!

  6. 10

    Estou de acordo. Os contrasinais son moi 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 mostra que non se está a considerar seriamente.

  7. 11

    Estou de acordo en que a validación do cliente pode ser unha función moi amigable para o usuario. Non obstante, é máis importante asegurarse de que as validacións en si teñen sentido.

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

    A validación da forza do contrasinal de Geek Wisdom desde considera tZhKwnUmIss ser un contrasinal débil. Este non só é un contrasinal perfectamente seguro, senón que tamén afastará aos usuarios porque lles dá a falsa impresión de que iniciar sesión no teu sitio usando este contrasinal será dalgún xeito inseguro.

    Sería moito mellor (e máis fácil) simplemente indicar 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 dunha determinada lonxitude mínima ou poden non conter espazos. Que hai de malo cos nomes de usuario X, John Doe, ou mesmo #*!§? Podo manexar iso.

  8. 12

    Estou dacordo contigo. Algúns formularios parecen ben, pero non ofrecen unha boa validación. Ofrécense información persoal e só é apropiado tomala en serio como calquera formulario comercial en copia impresa.

  9. 13
  10. 14
  11. 15

    Paréceme un pouco divertido que publiques sobre a bondade de proporcionar validación de formularios en tempo real e, aínda así, o teu formulario de comentarios ao final da publicación non ofrece ningún destes...

    Decátome de que estás usando WordPress para bloguear os teus pensamentos en Internet, pero quizais asegurarte de que practiques o que predicas tampouco sexa tan mala idea. 🙂

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

    • 16

      Doh! ¡Me destrozaste, Amanda! Gustaríame ter tempo para facer unha mellor validación de formularios e para integralo 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 aprecio que haxa varias opinións sobre calquera tema).
      Doug

¿Que pensas?

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