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

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

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

Моето основно правило е, че всичко, което не е валидирано, се поддържа. Всичко, което може да бъде потвърдено преди подаване на формуляра, трябва да бъде. С появата на 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

    Съгласен съм, че това са страхотни функции за формуляри, но това, че е „непростимо“ да не се извършва проверка на Javascript отпред, е по-скоро лично мнение. Обичам да работя в javascript и съм написал някои доста изчистени редакционни маски, за да правя някои от нещата, за които говорите, но много от тях далеч не са тривиални и много от пакетите за валидиране на формуляри на javascript имат редица големи дупки. Не всеки ще инвестира времето си в дублиране на валидирането им отзад с (по-често) по-сложна проверка на javascript от предния край.

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

  2. 2

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

    Пример:

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

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

  3. 4

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

    • 5
      • 6

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

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

  4. 7

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

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

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

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

    • 8

      Джей,

      Съжалявам за това! Идеята ми определено не беше да предоставям обратна връзка с разработчиците - наистина идвах от гледна точка на продуктов мениджър. Съгласен съм с вас - но интересно е, че някои други разработчици не го правят! Мисля, че това е жалко.

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

  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

      Да! Ти ме разби, Аманда! Иска ми се да имах време да направя по-добра проверка на формата и да я интегрирам в WordPress. Особено ми харесва Adobe Spry рамка за валидиране и бих се радвал да видя някой да интегрира двете!

      Благодаря! (И аз винаги оценявам, че има множество мнения по всяка тема).
      Дъг

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

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