JavaScript表單錯誤數組不登記

我已經做了小提琴，所以你可以爲你的測試它自己：JavaScript表單錯誤數組不登記

http://jsfiddle.net/ProjectV1/9XQtb/

的Javascript

我已經編寫了一些簡單的驗證和功能之前創建一個用於表單錯誤的數組，在函數結尾處有一個if語句，如果任何數組== true，那麼它將阻止表單提交的事件處理程序。

實際的問題我已經是自己的作品等形式做了錯誤陣列但如果語句做不工作既確認輸入。

用小提琴自己試試（爲了方便理解，我在輸入旁邊添加了輸入的變量錯誤結果，以方便理解）;

重建問題

要傳遞的錯誤== false，則電子郵件必須是有效的，密碼超過6個字符，用戶名超過3個字符。

舉例來說，我已經指出了谷歌的形式。

表適用於非確認輸入

如果你點擊了電子郵件，密碼和用戶名的輸入字段，而沒有選擇確認輸入，並嘗試提交它會像預期的那樣了不得的形式錯誤變量返回true。然後填寫它們以便錯誤在沒有選擇確認輸入字段的情況下返回錯誤，並且表單將按預期提交，因爲錯誤變量返回false。

形式不用於確認輸入

工作，但如果你填寫所有表格字段，這樣的確認輸入一個或兩個包含錯誤，那麼形式還是提出，即使該錯誤輸入字段返回false。

確認輸入只會嘗試驗證，如果它確認自己的輸入返回爲false。

爲什麼會發生這種情況，我該如何預防它？它是否與確認輸入嵌套在if語句中有關。

JavaScript代碼

$(document).ready(function() { 

$('#joinForm input').blur(function() { 
    var id = $(this).attr('id'); 
    joinAjax (id); 
}); 

}); 

var errors = new Array(); 
errors[email] = null; 
errors[cemail] = null; 
errors[password] = null; 
errors[cpassword] = null; 
errors[username] = null; 

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 == '') { 
     errors[email] = true; 
     $('#' + id).after('<div id="emailMsg" class="error">' + errors[email] + '</div>'); 
    } 

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

    else { 
     errors[email] = false; 
     $('#' + id).after('<div id="emailMsg" class="success">' + errors[email] + '</div>'); 
    } 

    joinAjax('#cemail'); 

} 

if (id == 'cemail') { 

    $('#cemailMsg').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])?/; 
    var email = $('#email').val(); 

    if (reg.test(email) == true) { 

     if (val != email) { 
      errors[cemail] = true; 
      $('#' + id).after('<div id="cemailMsg" class="error">' + errors[cemail] + '</div>'); 
     } 

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

    } 

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

if (id == 'password') { 

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

    if (val == '') { 
     errors[password] = true; 
     $('#' + id).after('<div id="passwordMsg" class="error">' + errors[password] + '</div>'); 
    } 

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

    else { 
     errors[password] = false; 
     $('#' + id).after('<div id="passwordMsg" class="success">' + errors[password] + '</div>'); 
    } 

    joinAjax('#cpassword'); 
} 

if (id == 'cpassword') { 

    $('#cpasswordMsg').hide(); 
    var password = $('#password').val(); 

    if (password.length >= 6) { 

     if (val != password) { 
      errors[cpassword] = true; 
      $('#' + id).after('<div id="cpasswordMsg" class="error">' + errors[cpassword] + '</div>'); 
     } 

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

    else { 
     $('#cpassword').val(''); 
    }   
} 

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

    if (val == '') { 
     errors[username] = true; 
     $('#' + id).after('<div id="usernameMsg" class="error">' + errors[username] + '</div>'); 
    } 

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

    else { 
     errors[username] = false; 
     $('#' + id).after('<div id="usernameMsg" class="success">' + errors[username] + '</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; 
});

工作實例

http://jsfiddle.net/ProjectV1/9XQtb/3/

更改後POINTYS諮詢

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">Username 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; 
}); 
}

我解決了所有pointys的建議，並添加了一些我自己的修改。

我將錯誤的默認值更改爲true，只有在需要錯誤時才更改它們。這樣做，我不必在出錯時將其更改爲true。
更改div內的值以顯示錯誤消息。
而不是檢查確認原始輸入確認是否對正則表達式或長度有效，我只是檢查錯誤的值是否是錯誤的。

感謝您的幫助，我希望大家能從中學習。

來源

2011-09-23 Project V1

您可以使用'** bold ** text'創建** bold **文本。 –

好的，謝謝菲利克斯國王 –

這裏這東西是不正確的：

errors[email] = null; 
errors[cemail] = null; 
errors[password] = null; 
errors[cpassword] = null; 
errors[username] = null;

你想要什麼，而不是爲：

errors.email = null; 
errors.cemail = null; 
errors.password = null; 
errors.cpassword = null; 
errors.username = null;

同所有其他引用。如果「email」，「cemail」，「password」等都是帶有一些值作爲鍵的變量，則第一種形式（當前在您的代碼中的不正確形式）將起作用。事實上，他們在這一點上沒有定義。第二種形式使用這些名稱作爲屬性名稱。

你可以，或者，表示屬性名稱爲字符串，並使用括號：

errors["email"] = null; 
errors["cemail"] = null; 
errors["password"] = null; 
errors["cpassword"] = null; 
errors['username'] = null;

初始化這些屬性爲空是不必要的了，真的，除非你的代碼是要做一個缺失之間的區別屬性和存在但是爲空值的屬性。但是，在後面的代碼中，事情會變得很奇怪，因爲實際上用這些名稱來定義變量，然後繼續將它們用作間接屬性名稱引用。您可能想要查看JavaScript中對象屬性參考語法的工作方式。哦，還有，因爲你沒有使用數字索引，所以不需要數組。它應該只是一個對象：

var errors = {};

編輯通過的jsfiddle來看，也有一些其他的問題。有遞歸調用給你的「joinAjax」函數沒有意義;我什至不能告訴他們應該做什麼。然後，當你發現錯誤，則設置錯誤標誌爲「真」，但隨後也直接在您顯示錯誤消息，使用該值（在下面，我定不正確的屬性引用）：

 errors.email = true; 
     $('#' + id).after('<div id="emailMsg" class="error">' + errors.email + '</div>');

我不不知道你想要發生什麼，但是對我來說這看起來很奇怪。

來源

2011-09-23 14:07:38 Pointy

好吧，現在就執行這個。我是JavaScript新手，但仍在學習，謝謝。 –

只是爲了澄清這是w3schools如何告訴你做一個數組（我這樣做）是錯的？ –

[不要使用w3schools。]（http://w3fools.com） – Pointy

JavaScript表單錯誤數組不登記

回答

相關問題