Впечатлете вашите уеб посетители с проверка на формуляри в реално време

онлайн формуляр

Първото впечатление, което обикновено имате като потребител на уеб приложение, е когато попълните уеб формуляр. Изумен съм от броя на уеб формулярите, които имат нулева проверка или които чакат да изпратите съдържанието на формуляра си, преди да ви кажат какви проблеми може да имате.

Моето основно правило е, че всичко, което не е потвърдено, се поддържа. Всичко, което може да бъде проверено преди подаване на формуляра, трябва да бъде. С появата на Ajax можете дори да проверите данните спрямо вашата база данни преди изпращане. Не избирайте мързеливия маршрут - потребителите оценяват помощта!

Ето някои примери:

  1. Имейл адреси - Нямам нищо против формуляри, които ви карат да попълвате имейл адреса си два пъти, за да ги потвърдите, но фактът, че те не ви казват дали съвпадат или са конструирани по подходящ начин, е непростим.
  2. Passwords - Ако ще ме карате да въвеждам парола два пъти, моля, проверете дали стойностите са еднакви, преди да публикувате формуляра.
  3. Сила на паролата - Ако се нуждаете от определена сила на паролата (комбинация от буквено-цифрови символи или букви), предоставете ми обратна връзка, докато въвеждам паролата си. Не чакайте да изпратя, преди да ми кажете, че не е успяла.
  4. Дати - Ако искате датата във формат am / d / yyyy, позволете ми да въведа информацията в едно поле, като напиша тези стойности и ги форматирам по подходящ начин. Ако искате водещи нули, поставете ги след. Добре е да покажете един формат и да запишете друг във вашата база данни.
  5. Днешната дата - Попълнете го за мен! Защо ме питате да попълня датата, когато вече я знаете ?!
  6. Дата Format - Ако имате международно заявление, можете да зададете формат на дата по подразбиране въз основа на интернационализация на вашето приложение. Разбира се, добре е да имате опция за потребителите да отменят тази опция и да избират своя собствена.
  7. Номерата на социалната сигурност - доста е лесно да добавите някакъв javascript, който автоматично прескача от поле на поле или програмно поставя тире между стойностите.
  8. Телефонни номера - като се вземе предвид интернационализацията, тези видове полета също могат да бъдат опростени чрез форматиране на телефонния номер в интерфейса, но запазването му в друг формат, който е ефективен за вашия back-end. Не карайте потребителите си да въвеждат скоби, интервали и тирета.
  9. Максимална дължина на текста - ако ограничите броя на символите, съхранявани във вашата база данни, НЕ ми позволявайте да въвеждам толкова много знаци! Дори не се изисква трудно проверяване ... това е просто настройка в текстовото поле.
  10. Минимална дължина на текста - ако се нуждаете от минимална дължина на текста, алармирайте, докато имам достатъчно знаци.

Ето пример за функция за надеждност на паролата от Geek Мъдрост:

Въведете паролата:

АКТУАЛИЗАЦИЯ: 10 - Намерих чист ресурс с JavaScript библиотека, достъпна за изтегляне за проверка на формата, наречена LiveValidation.

16 Коментари

  1. 1

    I agree those are great features for forms, but saying that it is “inexcusable” to not do perform front end javascript validation is a more of an personal opinion. I love working in javascript, and have written some pretty neat editmasks to do some of the things you talk about, but a lot of them are far from trivial, and many of the javascript form validation packages out there have a number of big holes. Not everyone will invest the time into duplicating their back end validation with (more often than not) more complex front end javascript validation.

    Добри точки, но определено не е нещо, от което всеки онлайн формуляр се нуждае, според мен.

  2. 2

    Проверката на паролата е относително счупена. Всяка парола е достатъчно добра, ако е дълга.

    Пример:

    Това наистина ли е посредствена парола?

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

  3. 4

    За мен най-добрата проверка на формата е, когато създавате на потребителя впечатление за проверка от страна на клиента, докато това е проверка от страна на AJAX / сървър.
    Просто трябва да прикачите към елементите на формуляра някаква обработка на събития (клавиши, размазване, щракване и т.н. ...), които публикуват целия формуляр чрез AJAX на сървъра, извиквайки функция „проверка“, която връща съответните съобщения за грешка (този passowrd е твърде просто, тази дата е в грешен формат и т.н. ...)
    Когато потребителят най-накрая публикува формуляра, като щракне върху бутона за изпращане, все още можете да използвате функцията за проверка от страна на сървъра, за да потвърдите последния път на формуляра, преди да вмъкнете данните в база данни или някакъв друг процес.
    По този начин потребителите са доволни от текущата проверка, А разработчиците са доволни от разработката за проверка само от страна на сървъра.

    • 5
      • 6

        Не толкова бързо Дъг - съгласен съм с първоначалната ви предпоставка, че тези полезни функции, като форматирането на SSN в движение, са тривиални. И е мързеливо просто да публикува съобщение, че е грешно, когато можете да го поправите, без да се налага да отгатвате формата.

        Съгласен съм обаче и с Никола за използването на логиката от страна на сървъра заедно с AJAX.

  4. 7

    В заглавието ви пише „Впечатлете приятелите си ...“, но не успявате да ме впечатлите с тези 2 минути, обадени в публикацията.

    Пренапишете заглавието си (твърде подвеждащо, кара човек да мисли, че се обсъждат примери и практики).

    If people are not doing this already in their forms, then they are just learning or the form is not important enough to use validation.

    Истинските уеб програмисти вече знаят това и го правят.

    • 8

      Джей,

      Sorry about that! My point was definitely not to provide developer feedback – I really was coming from the point of view of a Product Manager. I agree with you – but it’s interesting that some other developers don’t! I think that’s unfortunate.

      Благодаря, че отделихте време!
      Дъг

  5. 9

    Напълно съм съгласен, че валидирането е необходим компонент на всяко приложение. Като ръководител на екип обикновено намирам, че изпращам код обратно, за да съм „завършен“ по причини като липсващи проверки или ограничаване на дължините на въвеждане на текст.

    За повечето неща, по които работя, ми се струва, че отнема около 50% от времето, за да работи нещо, при нормални условия и ако потребителите използват системата по начина, по който съм предвидил. Останалите 50% от времето за разработка идват от проверка на въведеното от тях, осигуряване на запазване на целостта на данните и направа, че полетата на формуляра не позволяват въвеждането на злонамерени данни.

    Написах публикация за това как използвам InputVerifiers в моите приложения за люлка hava и показвам как проверявам текстовото поле на имейл. Регулярният израз, който използвам, е лесно модифицируем за потвърждаване на телефонни номера, пощенски кодове, SSN и т.н.

    Публикацията ми в блога е на http://timarcher.com/?q=node/36

    Добър запис Дъг!

  6. 10

    Съгласен съм. Паролите са наистина важни и трябва да се приемат сериозно. Мисля, че е нормално за почти всички формуляри да въвеждат паролата два пъти, но липсата на валидност на двете пароли показва, че тя не се разглежда сериозно.

  7. 11

    Съгласен съм, че проверката на клиента може да бъде много удобна за потребителя функция. По-важно е обаче да се уверите, че валидирането всъщност има смисъл.

    Предоставихте блестящ пример за това как валидирането може да заблуди потребителите и, още по-лошо, да ги отблъсне от нашия сайт:

    Проверка на силата на паролата на Geek Wisdom от разглежда tZhKwnUmIss да бъде слаба парола. Това не само е идеално силна парола, но и ще отблъсне потребителите, защото им създава фалшивото впечатление, че влизането във вашия сайт с тази парола ще бъде някак несигурно.

    Би било много по-добре (и по-лесно) просто да намеквате на потребителите, че добрата парола е дълга поне шест знака и трябва да съдържа както цифри, така и букви.

    Други съмнителни проверки включват потребителски имена, които се нуждаят от определена минимална дължина или може да не съдържат интервали. Какво не е наред с потребителските имена X, Джон Доу, или дори # *! §? Мога да се справя с това.

  8. 12

    Съгласен съм с теб. Някои формуляри изглеждат добре, но не предлага добра проверка. Дават се лични данни и е редно да се приемат на сериозно точно както всякакви бизнес форми на хартиен носител.

  9. 13

    Да, дойдох тук с надеждата за някакъв примерен код. Моля, преименувайте темата на тази публикация.

  10. 14
  11. 15

    Намирам за малко забавно да публикувате за добротата за предоставяне на валидност на формуляра в реално време и въпреки това, вашият формуляр за коментар в долната част на публикацията не предоставя нито едно от тези ...

    Осъзнавам, че използвате WordPress, за да публикувате мислите си в интернет, но може би и да гарантирате, че практикувате това, което проповядвате, също не е толкова лоша идея. 🙂

    Между другото, добър пост, дори ако не съм непременно съгласен с всичко, което сте написали.

    • 16

      Doh! You busted me, Amanda! I do wish I had time to do better form validation and to integrate it into WordPress. I especially like the Adobe Spry рамка за валидиране и бих се радвал да видя някой да интегрира двете!

      Thanks! (And I always appreciate that there are multiple opinions on any topic).
      Дъг

Какво мислите?

Този сайт използва Akismet за намаляване на спама. Научете как се обработват данните за коментарите ви.