壓縮驗證策略

Question

以下驗證代碼已交給我，它看起來如此重複。我如何從他的例子中學習如何減少每個輸入字段發生的重複過程，這些輸入字段在下面進行驗證....？我想用JavaScript更有效，而不是重複着同樣的功能和一遍又一遍，只是因爲一個形成一個新的輸入元素上添加了...

function isRequired(){ 
     firstNameRequired(); 
     lastNameRequired(); 
     stateRequired(); 
     gradYearRequired(); 
     relationshipRequired(); 
     birthdayRequired(); 
} 

function firstNameRequired(){ 
     var firstName = document.forms['subscribeForm']['First Name'].value; 
     if (firstName == null || firstName ==''){ 
     alert('Please enter your first name.'); 
      document.subscribeForm.elements['First Name'].style.backgroundColor='yellow'; 
      return false; 
     } 
    } 

    function lastNameRequired(){ 
     var lastName = document.forms['subscribeForm']['Last Name'].value; 
     if (lastName == null || lastName ==''){ 
       alert('Please enter your last name.'); 
      document.subscribeForm.elements['Last Name'].style.backgroundColor='yellow'; 
      return false; 
     } 
    } 

    function stateRequired(){ 
     var state = document.forms['subscribeForm']['State'].value; 
     if (state == null || state ==''){ 
       alert('Please enter your state of residence.'); 
      document.subscribeForm.elements['State'].style.backgroundColor='yellow'; 
      return false; 
     } 
    } 

    function gradYearRequired(){ 
     var gradYear = document.forms['subscribeForm']['Graduation Year'].value; 
     if (gradYear == null || gradYear ==''){ 
      alert('Please enter your graduation year.'); 
      document.subscribeForm.elements['Graduation Year'].style.backgroundColor='yellow'; 
      return false; 
     } 
    } 

    function relationshipRequired(){ 
    var relationship = document.forms['subscribeForm']['ABC Link Relationship'].value; 
    if(relationship == null || relationship == ''){ 
     alert('Please enter your relationship to ABC.'); 
     document.subscribeForm.elements['ABC Link Relationship'].style.backgroundColor='yellow'; 
     return false; 
    } 
    } 

    function birthdayRequired(){ 
    var birthDay = document.forms['subscribeForm']['Birthdate'].value; 
    if(birthDay == null || birthDay == ''){ 
     alert('Please enter your birthday.'); 
     document.subscribeForm.elements['Birthdate'].style.backgroundColor='yellow'; 
     return false; 
    } 
    } 


... 

<input type="submit" class="submitBtn" value="" onclick="isRequired()" /> 

另外，我有靈活性，如果需要在jQuery的工作是。

Answer 1

檢測代碼中的哪些部分是重複的，哪些部分在字段之間發生了變化。例如，您可以創建一個具有兩個參數的函數：字段名稱及其標籤。

function validateRequiredField(name, label) 
{ 
    var value = document.forms['subscribeForm'][name].value; 
    if (value == null || value == '') { 
     alert('Please enter your ' + label); 
     document.forms['subscribeForm'][name].style.backgroundColor = 'yellow'; 
     return false; 
    } 
} 

然後，你可以調用這個函數傳遞名稱和標籤作爲參數：

validateRequiredField('First Name', 'first name'); 
validateRequiredField('ABC Link Relationship', 'relationship to ABC'); 
// ... 

請記住，這些驗證也應該在服務器端完成，因爲有人可以只禁用JavaScript的併發送您的表單跳過您的客戶端驗證功能。

Answer 2

因爲傳遞的唯一數據是對象和警報消息，而不是整個自定義函數，所以使用帶有對象和消息參數的單個函數。

function isRequired(){ 
    required(document.forms['subscribeForm']['First Name'],'first name'); 
    required(document.forms['subscribeForm']['Last Name'],'last name'); 
    required(document.forms['subscribeForm']['State'],'state of residence'); 
    required(document.forms['subscribeForm']['Graduation Year'],'graduation year'); 
    required(document.forms['subscribeForm']['ABC Link Relationship'],'relationship to ABC'); 
    required(document.forms['subscribeForm']['Birthday'],'birthday'); 
} 

function required(object,message){ 
    if (!obj) { 
     alert('Please enter your '+message); 
     obj.style.backgroundColor='yellow'; 
     return false; 
    } 
    return true; 
} 

Answer 3

首先我會建議使用的ID讀出表單字段：

<input type="text" id="firstname" /> 

這允許你使用jQuery（'＃名字）來選擇此輸入字段。

其次，這裏就是我會去使代碼更小的任務：

什麼是你想在這裏做什麼？

1. 您總是從窗體中讀取一些值（取決於排序的ID）。
2. 然後您檢查該值是否爲空。
3. 如果未設置該值，則想要顯示錯誤消息（取決於ID再次）。
4. 而且您還想標記丟失的字段，然後返回false。

所以我想編寫一個函數，它正是：

// function having a parameter for the ID and the custom error message 
function checkFormField(fieldID, errorMsg) { 

    // read value from field using jquery 
    value = $(fieldID).value(); 

    // check for null or empty 
    if (value == null || value == '') { 

     // display custom error message 
     alert(errorMsg); 

     // change color of field using jQuery 
     $(fieldID).css('background', 'yellow'); 

     return false; 
    } 
} 

現在你可以重複使用此功能要檢查每一個領域。新isRequired方法是這樣的：

function isRequired(){ 
    checkFormField('#firstname', 'Please enter your first name.'); 
    checkFormField('#lastname', 'Please enter your last name.'); 
    // and so on... 
} 

Answer 4

注意，這個例子就需要名稱屬性，可以用作標識符（無空格）

<input name="first_name" type="text" /> 
<input name="last_name" type="text" /> 

JS：

function validateRequired(slug, field){ 
    // test for passing condition 
    if (field.value !== null && field.value !== '') { 
     return true; 
    } 
    else { 
     alert('Please enter your ' + field.str); 
    } 
    return false; 
} 

/** 
* Validate a form using a ruleset object 
* 
*/ 
function validateFields(ruleset, form){ 
    var field = {}; 
    var errors = 0; 

    // Loop though the ruleset 
    for(var index in ruleset) { 
     // 
     if (ruleset.hasOwnProperty(index)) { 
      field = ruleset[index]; 
      // check if input exists 
      if (form[index]){ 
       field.value = form[index].value 
      } 
      if (ruleset[index].required) { 
       if (!validateRequired(field)){ 
        errors++; 
        field.invalid = true; 
       } 
      } 
      // you could add more rules here... 
     } 
    } 
    return errors === 0; 
} 

var valid = validateFields({ 
    first_name : { 
     required : true, 
     str: 'first name' 
    }, 
    last_name : { 
     required : true, 
     str: 'last name' 
    } 
    // ... 
}, document.forms['subscribeForm']);