JavaScript表單驗證改進

Question

我有一個用戶配置文件表單，包含15個文本字段以及一些下拉菜單和一個textarea。場景是用戶可以以簡介形式輸入字段。在保存時，不必填寫所有字段，無論用戶填寫什麼字段，都必須通過ajax調用驗證並保存在數據庫中。

現在我使用驗證這個樣子，

var first_name = document.getElementById('id_candidate_profile-first_name').value; 
    .... 
     var status = false; 

if(first_name != ''){ 
    status = regex_test(first_name, ck_name); 
    if(status==false){ 
     document.getElementById('candidate_profile_error-first_name').innerHTML = "first name should only have alphabets"; 
    } 
    else{ 
     status = true; 
    } 
} 

if(middle_name != "" & status = true){ 
    status = regex_test(middle_name, ck_name); 
    if(status==false){ 
     document.getElementById('candidate_profile_error-middle_name').innerHTML = "middle name should only have alphabets"; 
    } 
    else{ 
     status = true; 
    } 
} 

if (last_name != '' & status = true){ 
    status = regex_test(last_name, ck_name); 
    if(status==false){ 
     document.getElementById('candidate_profile_error-last_name').innerHTML ="last name should only have alphabets"; 
     } 
    else{ 
     status = true; 
    } 
} 

if (date_of_birth != '' & status = true){ 
    status = regex_test(date_of_birth, ck_date); 
    if(status==false){ 
     document.getElementById('candidate_profile_error-date_of_birth').innerHTML ="date of birth should be in YYYY-MM-DD format"; 
     } 
    else{ 
     status = true; 
    } 
} 
if (birth_place != '' & status = true){ 
    status = regex_test(birth_place, ck_name); 
    if(status==false){ 
     document.getElementById('candidate_profile_error-birth_place').innerHTML ="birth_place should only have alphabets"; 
     } 
    else{ 
     status = true; 
    } 
} 

if (nic != '' & status = true){ 
    status = regex_test(nic, ck_name); 
    if(status==false){ 
     document.getElementById('candidate_profile_error-nic').innerHTML ="nic should be in this format 12345-1234567-1"; 
     } 
    else{ 
     status = true; 
    } 
} 

if (status = true) { 
// made ajax call 
} 


function regex_test(variable, regex){ 
    var _result = false; 
    if(!regex.test(variable)){ 
     _result = false; 
     } 
    else { 
     _result = true; 
     } 
    return _result; 
} 

可以看出，有很多的嵌套，如果其他人蔘與這激怒我，需要一些更好的方法來做到這一點？任何最好的選擇？

Answer 1

您可以創建驗證對象的數組，包含性能reg_ex，field，error_msg_container_id和error_msg每個對象：

var validationRules = [ 
    { reg_ex: first_name, 
     field: ck_name, 
     error_msg_container_id: candidate_profile_error-first_name, 
     error_msg: "first name should only have alphabets" }, 
    { reg_ex: date_of_birth, 
     field: ck_date, 
     error_msg_container_id: candidate_profile_error-date_of_birth, 
     error_msg: "date of birth should be in YYYY-MM-DD format" } 
]; 

在驗證功能，您只是遍歷整個數組。這也使得更容易維護您可能稍後添加的更多輸入字段。

P.S .:如果你不知道如何迭代數組，請告訴我。

編輯：既然由OP請求，迭代函數將類似於此：

function isFormDataValid() { 
    for (i=0; i< validationRules.length; i++) { 
     // do the validation inside here, it will be repeated once for each validation rule; 
    } 
    return status; 
} 

如果你從陣列中需要的變量屬性名稱讀/寫，使用此語法

Object[variable] 

其中variable包含字符串，它是您需要訪問的屬性的名稱。

var myObject = { 
 
    name: "peter", 
 
    age: 46 
 
}; 
 

 
var validationRules = [ { fieldname: 'name'}, { fieldname: 'age' } ]; 
 

 

 
for (var i=0; i< validationRules.length; i++) { 
 
    alert(myObject[validationRules[i].fieldname]); 
 
}

Answer 2

您可以使用任何表單驗證庫。我個人推薦荷蘭芹。

有一個簡單的驗證形式，例如：http://parsleyjs.org/doc/examples/simple.html