JQuery. Как улучшить регистрационную форму?

Question

[Isaac Clark]

Здравствуйте.

Подскажите пожалуйста.

Я написао форму проверку формы регистрации, вот код:

$(this).blur(function () {<br>
       var _value = $(this).val(),<br>
           reg_loginName = new RegExp(/^[a-zA-Z0-9_-]{3,16}$/).test(_value); // в данном случае выражения для проверки логина, но на форме так же есть почта, пароль, имя , фамиля, то есть для каждого поля своя переменная<br>
            .........<br>
       switch($(this).attr("id"))<br>
       {<br>
           case "id_username": // проверка для логина, но так же будет отдельный case для каждого поля(почта, пароль, имя, фамилия...)<br>
               if((!reg_loginName) || (_value.length < 6)) // если не соответствует выражению и пользователь ввел меньше 6 символов, то красим рамку в красный цвет<br>
               {<br>
                   $(this).parent().parent().attr("class", "control-group error");<br>
<br>
                   if(!(reg_loginName) && !($(".help-login-reg").length)) // если не соотсветсвует выражению, то выводим сообщение об ошибки, предворительно проверив, что данное сообщение еще не создано, чтоб не создавать одинаковых сообщений<br>
                       $(this).parent().children(".error-list").append("<li class='help-inline help-login-reg'>Только символы латинского алфавита, цифры, дефис и подчеркивание (a–z, 0-9, -, _).</li>");<br>
                   if((_value.length < 6) && !($(".help-login-length").length)) // если меньше 6 символо, то выводим сообщение об ошибке<br>
                       $(this).parent().children(".error-list").append("<li class='help-inline help-login-length'>В логине должно быть не менее 6 символов.</li>");<br>
               }<br>
               if((reg_loginName) && (_value.length >= 6)) // если пользователь верно заполнил форму, то красим рамку в зеленый цвет<br>
               {<br>
                   $(this).parent().parent().removeAttr("class");<br>
                   $(this).parent().parent().attr("class", "control-group success");<br>
               }<br>
               if(reg_loginName) // удаляем сообщение об ошибках, если они выводились<br>
                   $(this).next().children(".help-login-reg").remove();<br>
               if(_value.length >= 6) // удаляем сообщение об ошибках, если они выводились<br>
                   $(this).next().children(".help-login-length").remove();<br>
           break;<br>
       }<br>
   });<br>
<br>

Теперь вопрос: как улучшить данный скрипт, как можно написать его в виде классов в JQuery(знаю классов нет в этой библиотеки, но как тогда их можно имитировать)? Как вообще нужно писать подобные вещи на jQuery, чтоб они не просто работали, а люди, которые читали код, понимали, что пишет не новичек? подскажите пожалуйста!

p.s. задача в том, что нужно сделать подобные вещи именно с помоцью библиотеки jquery, никаие другие и без «чистого» javascript

Спасибо за помощь и время!

Answer 1

[wrmax]

Старайтесь стремится к тому, чтобы код можно было прочитать без комментариев.
Обычно левую фигурну скобку не пишут с новой строки

Ниже улучшенный вариант кода для дальнейшего развития

$(this).blur(function () {
	var removeErrorMessage = function(className) { $(this).next().children("." + className).remove(); };
	var showErrorMessage = function(className, message ){
		if (!($("." + className).length)){
			$(this).parent().children(".error-list").append(["<li class='", className, "'>", message, "</li>"].join());
		}
	};
	var showSuccessView = function() { $(this).parent().parent().attr("class", "control-group success"); };
	var showWrongView = function() { $(this).parent().parent().attr("class", "control-group error"); };
	
	var checkLogin = function(login){
		var loginVerified = new RegExp(/^[a-zA-Z0-9_-]{3,16}$/).test(login);	
		
		if ((loginVerified) && (login.length >= 6)) showSuccessView(); else showWrongView();
		
		if (login.length >= 6) removeErrorMessage("help-login-length");
		else{ 
			showErrorMessage("help-inline help-login-length", "В логине должно быть не менее 6 символов");
		}
		
		if (loginVerified) removeErrorMessage("help-login-reg");
		else{
			showErrorMessage("help-inline help-login-reg", "Только символы латинского алфавита, цифры, дефис и подчеркивание (a–z, 0-9, -, _).");
		}
		
	};
	
	switch($(this).attr("id")){
		case "id_username": checkLogin($(this).val()); break;
	}
});

Comments

[Isaac Clark]

спасибо!

[Isaac Clark]

только есть небольшая ошибка при формировании или я не так понял, но если изменить на $($this).parent().children(".error-list").append("<li class='" + className + "'>" + message + "</li>");, то работает лучше

[wrmax]

В IE6 была ошибка с конкатенацией, и под него приходилось оптимизировать соединения строк делая через join. Для других браузеров может быть иная ситуация.
Совершенству нет предела. Код конечно можно ещё улучшить.

Answer 2

[BlessMaster]

как улучшить данный скрипт, как можно написать его в виде классов в JQuery (знаю классов нет в этой библиотеки, но как тогда их можно имитировать)?

Что Вы имеете в виду под «имитировать»? В jQuery пишут плагины — материалов на эту тему на хабре хватает — смотрите по тегу jquery plugins — авторы выкладывают исходные коды на github

Как вообще нужно писать подобные вещи на jQuery, чтоб они не просто работали, а люди, которые читали код, понимали, что пишет не новичек? подскажите пожалуйста!

Ну, как выше сказали, дело не в jQuery, это общий момент для любых фреймворков и языков:
— пишите кратко и лаконично,
— придерживайтесь принципа «разделяй и властвуй» — выносите общий код «за скобки» — в отдельные методы
— поменьше магии — всё должно быть очевидно и наглядно
— не старайтесь использовать максимум возможностей вроде анимаций и т.п. — код должен выполнять работу, а не нагружать процессор — у кого-то и батарейка нерезиновая.
Остальное — придёт с опытом

Answer 3

[Сергей Протько]

Во первых, если у вас есть возможность подправить разметку формы — можно использовать всякие штуки аля… type=«email», атрибут required, атрибут pattern и много чего еще из HTML 5. В JS же сделать проверку только по этим аттрибутам.

Во вторых, зачем вам здесь классы? Вообще прототипное наследование иногда гараздо круче классического. Это вам вообще JavaScript учить надо а не jQuery.

Вообще брали бы готовые плагины для jQuery и не парились.

Comments

[Сергей Протько]

к слову, у вас в коде очень много повторяющейся ереси. Например… добавление ошибок можно вынести в одну функцию в которую будет передаваться только сообщение, и быть может указатель на эллемент для которого была совершена ошибка. Последнее нужно, например, что бы через какой $('html,body').scrollTop опустить пользователя к нужному полю. Ошибки же писать списком удобно для разработчика, но я например стараюсь этого избегать. Мне больше по душе какие tooltips или чего еще.

[Isaac Clark]

1. Знаю, что JavaScript учить надо, но ведь я просил подсказать именно по поводу JQuery.
2. Если прототипное наследование лучше, то пожалуйста, подскажите, как можно его применить в данном случае.
3. HTML5 не могу использовать.

[Isaac Clark]

Сейчас меня интересует, только то, как улучшить данный код

[Сергей Протько]

Про прототипное наследование можно почитать тут, хотя конкретно в вашем случае это явно никак вам не поможет.

Ваш код можно улучшить так:
1) постараться вынести все правила валидации в какой нить конфиг, мол для такого-то id соответствуют такие-то правила.
2) в самой функции брать значение, брать правила и прогонять.
3) реализовать функцию которая будет управлять ошибками (добавление в список, продумать как сделать так что бы ошибка удалялась после изменения значения поля на коректное). Просто функция вида appendError(message). Это избавит вас от макарон и дублирующегося кода разметки.

Если уж очень нравится концепция с классами — можете реализовать абстрактный класс валидатора (в прототипе только метода validate( value ) и поле message, от которого потом расширять обычные валидаторы типа email, minlength, maxlength и т.д, затем уже добавить на основе тех что есть или просто от абстрактного добавить кастомные валидаторы (мол для проверки уникальности логина, который бы связывался с сервером и т.д.)
Когда вы это все сделаете, можете для каждого айдишника добавить свой валидатор. Можно даже сделать так что бы валидаторы сами мониторили состояния своих полей.

Если же вам надо что бы кто-то за вас оформил должным образом этого макаронного монстра, то уж извините.

Answer 4

[Анатолий]

«Как вообще нужно писать подобные вещи на jQuery, чтоб они не просто работали, а люди, которые читали код, понимали, что пишет не новичек?»
Опыт нужен а не подсказка. То что там написано любой итак поймет, а чтоб понимали что пишет не новичек, нужно долгое время работать с JS (jQuery конкретно тут ни при чем)

1. $(this).parent().parent() повторяется много раз, не проще ли вынести его один раз в переменную?
2. .append("<li class='help-inline help-login-reg'>Только символы латинского алфавита, цифры, дефис и подчеркивание (a–z, 0-9, -, _).</li>"); — вот такое я тоже не очень люблю, вынесите показ ошибок отдельно error.show('message')
3. см 1. var self = $(this);
4. короче коментарии, пары слов достаточно, вы ведь не для идиотов пишете?

Этого в принципе будет достаточно чтоб сделать ваш скрипт чуть лучше.