Сначала зайдите на мою собственную форма проверки, и предложения?


Ну я только что закончил мой первый моя собственная форма проверки (я всегда использовал проверить плагин) для простой передний конец. Это наверняка мелкая сошка, как это предназначено только для форма с 4 полями; 3 необходимый текст и один обязательный по электронной почте.

Я новичок в jQuery, поэтому я делаю мало упражнений, как эти, чтобы помочь мне узнать, и я надеялся, что кто-то может взглянуть и увидеть, если то, что я сделал хорошо. Я сделал какие-либо ошибки новичка? Я могу улучшить это? Возможно, я должен использовать объекты в JS (новый тоже), чтобы организовать код? Я знаю, что нет ни одного ответа, на самом деле я уверен, что есть множество способов для проверки форма...но я просто надеялся, что какого-нибудь JS-эксперт может предложить некоторое представление о лучших практик кодирования.

*Правка - забыл упомянуть...я знаю, что я должен использовать regex для лучшего подтверждения адреса электронной почты, однако, просто бросил метод indexOf() метод на данный момент *

$(function() {

        var err = "<span class='error'>Required field.</span>";
        var errEmail = "<span class='error'>Please enter valid email.</span>";
        var errors = false;

        $('.submit').click(function() {
            $('.error').remove();

            $('.req').each(function() {
                if($(this).val() == '') {
                    $(this).after(err);
                    errors = true;
                } 
            });

            if ($('.reqe').val().indexOf('@') === -1) {
                $('.reqe').after(errEmail);
                errors = true;
            }

            if (errors == true) {
                return false;
            }
            else {
                var errors = false;
                alert("Submitted");
                return true;
            }

        });
});

Любая обратная связь будет принята с благодарностью. Спасибо



220
1
задан 12 сентября 2011 в 02:09 Источник Поделиться
Комментарии
1 ответ

Пару небольших изменений:


  1. ближе к концу:

    if (errors == true) {
    return false;
    }
    else {
    var errors = false;
    alert("Submitted");
    return true;
    }

    Может быть:

    if(!errors)
    {
    alert("Submitted");
    }
    return !errors;

  2. интернет .Треб

    if($(this).val() == ''){

    может быть:

    if(!$(this).val()){

    На самом деле это будет проблемой, потому что

     " " != ""

    так пространство будет проверить (если это то, что вы задумали, то игнорировать это ;) )


  3. ВАР ошибок= ложь; должен быть внутри события click:

     $('.submit').click(function() {
    var errors = false;

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


В качестве альтернативы:-

http://jsfiddle.net/ssTPm/

var validationConfig = [
{
"selector": ".req",
"hasErrors": function() {
return !$(this).val()
},
"errorMessage": "<span class='error'>Required field.</span>"},
{
"selector": '.reqe',
"hasErrors": function() {
return $('.reqe').val().indexOf('@') === -1
},
"errorMessage": "<span class='error'>Please enter valid email.</span>"
}];

тогда хороший цикл вроде:

for (var i = 0, validation = null; validation = validationConfig[i]; i++) {
$(validation.selector).each(validateEach);
}

и validateEach будет выглядеть так:

 function validateEach () {
var hasErrors = validation.hasErrors.call(this);
errors |= hasErrors;
if (hasErrors) {
$(this).after(validation.errorMessage);
}
};

Это будет означать, что вы могли бы иметь функцию проверки в ВЫ файлы JS, а затем, когда вы инициализировать страницу с сервера, вы просто выведите validationConfig:

validationConfig = validationConfig || [];
validationConfig.concat([
{
"selector": ...
}
];

как много раз, как вам нравится. Хотя судя по всему это может быть за технических вещей немного.

Пояснения:-

так что || - это коалесцируют или или оператора.

myVariable = myVariable || [];

значит, если значение MyVariable результаты в значение true (не ложь, неопределено, значение null и т. д.), то он ничего не делает, в противном случае он присваивает ему значение по умолчанию.

так что, если у меня следующие:

myList = myList|| [];
myList.push(1);
myList = myList|| [];
myList.push(2);
myList = myList|| [];
myList.push(3);

это приведет к [1,2,3]. Первый раз она устанавливает значение [] в следующий раз они просто присвоить себе. Таким образом, он не должен знать, если он был инициализирован или нет.

у |= - это побитовое | (побитовое или) , и = так

value |= otherValue;

это эквивалентно

value = value | otherValue;

В этом примере

errors |= hasErrors;

точно такой же, как

errors = errors || hasErrors;

Ошибки присваивается значение true , пока либо он был уже истинным или hasErrors это правда;

1
ответ дан 12 сентября 2011 в 03:09 Источник Поделиться