Моя форма JavaScript код ошибки


Просто на самом деле моя функция JavaScript для проверки формы.

var errors = {};
errors.email = true;
errors.cemail = true;
errors.password = true;
errors.cpassword = true;
errors.username = true;
function joinAjax (id) {

var val = $('#' + id).val();
if (id == 'email') {

    $('#emailMsg').hide();
    var reg = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
    if (val == '') {

        $('#' + id).after('<div id="emailMsg" class="error">Enter your email</div>');
    }
    else if (reg.test(val) == false) {

        $('#' + id).after('<div id="emailMsg" class="error">Email invalid</div>');
    }
    else {

        errors.email = false;
        $('#' + id).after('<div id="emailMsg" class="success">Email OK</div>');
    }
    joinAjax('cemail');
}
if (id == 'cemail') {

    $('#cemailMsg').hide();
var email = $('#email').val();
    if (errors.email == false) {

        if (val != email) {

            $('#' + id).after('<div id="cemailMsg" class="error">Emails do not match</div>');
        }
        else {

            errors.cemail = false;
            $('#' + id).after('<div id="cemailMsg" class="success">Success</div>');
        }
    }
    else {

        $('#cemail').val('');
    }
}
if (id == 'password') {

    $('#passwordMsg').hide();
    if (val == '') {

        $('#' + id).after('<div id="passwordMsg" class="error">Enter a password</div>');
    }
    else if (val.length < 6) {

        $('#' + id).after('<div id="passwordMsg" class="error">Minimum length of 6</div>');
    }
    else {

        errors.password = false;
        $('#' + id).after('<div id="passwordMsg" class="success">Password OK</div>');
    }
    joinAjax('cpassword');
}
if (id == 'cpassword') {

    $('#cpasswordMsg').hide();
    var password = $('#password').val();
    if (errors.password == false) {

        if (val != password) {

            $('#' + id).after('<div id="cpasswordMsg" class="error">Passwords do not match</div>');
        }
        else {

            errors.cpassword = false;
            $('#' + id).after('<div id="cpasswordMsg" class="success">Success</div>');
        }
    }
    else {

        $('#cpassword').val('');
    }        
}
if (id == 'username') {

    $('#usernameMsg').hide();
    if (val == '') {

        $('#' + id).after('<div id="usernameMsg" class="error">Enter a username</div>');
    }
    else if (val.length < 3) {

        $('#' + id).after('<div id="usernameMsg" class="error">Minimum length is 3</div>');
    }
    else {

        errors.username = false;
        $('#' + id).after('<div id="usernameMsg" class="success">Available</div>');
    }
}
$('#joinForm').submit(function(event){

    if ((errors.email == true) || (errors.cemail == true) || (errors.password == true) || (errors.cpassword == true) || (errors.username == true)) {

        event.preventDefault();
    }
    return true;
});
}

Это может быть улучшено? Я ищу способ, чтобы создать функцию для события submit, но я не могу понять, как я не знаю, сколько параметров нужно будет каждый раз.



213
3
задан 23 сентября 2011 в 04:09 Источник Поделиться
Комментарии
3 ответа

Некоторые советы:

3
ответ дан 26 сентября 2011 в 06:09 Источник Поделиться

Я вижу несколько ссылок на $('#' + ID), то это может быть легче поддерживать, а также сэкономить потребление памяти, если вы объявите переменную и присвойте ему значение.

var form_id = $('#' + id);

Затем в любом месте вы ссылку $('#' + ID), то просто положите в form_id.

3
ответ дан 26 сентября 2011 в 01:09 Источник Поделиться

Несколько вещей, которые я рекомендую:

Поворот линии 1 - 7 в литерал объекта, он делает цель немного яснее.

var errors = {
email : true,
cemail : true,
password : true,
cpassword : true,
username : true
};

Использовать не тип-приводки операторы сравнения === и != вместо == при оценке ложных и числовые значения.

Поэтому изменение линии 33 для:

if (errors.email === false) {

Инкапсулировать свои ошибки проверки на отдельные функции, примером может быть что-то вроде:

if (id == 'cemail') {
checkEmail();
}

function checkEmail(){

$('#cemailMsg').hide();

var email = $('#email').val();

if (errors.email === false) {

if (val != email) {

$('#' + id).after('<div id="cemailMsg" class="error">Emails do not match</div>');
}
else {

errors.cemail = false;
$('#' + id).after('<div id="cemailMsg" class="success">Success</div>');
}
}
else {

$('#cemail').val('');
}
}

Затем, как только вы добраться до этого уровня инкапсуляции и детализации, вы можете начать добавлять функции для добавления ваших сообщений об ошибках, чтобы не дублировать этот код. С верхней части моей головы что-то вроде:

if (val != email) {

addError(id,'<div id="cemailMsg" class="error">Emails do not match</div>');
}

function addError(divId,error){
$('#' + divId).after(error);
}

Таким образом, если вы измените способ обработки ошибок вы можете сделать это в одном месте.

2
ответ дан 30 сентября 2011 в 11:09 Источник Поделиться