2017-04-03 63 views
0

我目前的問題是我的表單如何驗證。爲了簡單起見,我現在只在這裏驗證名字和姓氏。Javascript/HTML表單驗證問題

比方說,不輸入他們的名字或姓氏。它只顯示錯誤信息「(請輸入你的名字)」,它不顯示「(請輸入你的姓氏)」。

比方說,輸入他們的名字而不是他們的姓氏,它會顯示「(請輸入您的姓氏)」。

有沒有辦法解決這個問題,例如,如果某人不輸入他們的名字和姓氏,它會顯示兩個錯誤消息?

的JavaScript:

function validateAll() { 
    //Inputs 
    var firstName = document.getElementById("firstName").value; 
    var lastName = document.getElementById("lastName").value; 

    //Errors 
    var firstNameError = document.getElementById("firstNameError"); 
    var lastNameError = document.getElementById("lastNameError"); 

    if (
     validateFirstName(firstName, firstNameError) == true && 
     validateLastName(lastName, lastNameError) == true 
     ) { 
     return true;  
    } else return false; 
} 

function validateFirstName(firstName, firstNameError) { 
    if (firstName == "") { 
     firstNameError.firstChild.nodeValue = "(Please Enter Your First Name)"; 
     return false; 
    } else { 
     firstNameError.firstChild.nodeValue = ""; 
     return true; 
    } 
} 

function validateLastName(lastName, lastNameError) { 
    if (lastName == "") { 
     lastNameError.firstChild.nodeValue = "(Please Enter Your Last Name)"; 
     return false; 
    } else { 
     lastNameError.firstChild.nodeValue = ""; 
     return true; 
    }  
} 

HTML:

<form name="registrationForm" id="registrationForm" onSubmit="return validateAll()" action="AddUserDetails"> 
    <div class="form-group"> 
     <label for="firstName">First Name</label> 
     <span id="firstNameError" class="error">*</span> 
     <input type="text" class="form-control" id="firstName" name="firstName"> 
    </div> 
    <div class="form-group"> 
     <label for="lastName">Second Name</label> 
     <span id="lastNameError" class="error">*</span> 
     <input type="text" class="form-control" id="lastName" name="lastName"> 
    </div> 
    <div class="form-group"> 
     <label for="phoneNumber">Phone Number</label> 
     <span id="phoneNumberError" class="error">*</span> 
     <input type="text" class="form-control" id="phoneNumber" name="phoneNumber"> 
    </div> 
    <div class="form-group"> 
     <label for="eMail">E-Mail</label> 
     <span id="eMailError" class="error">*</span> 
     <input type="text" class="form-control" id="eMail" name="eMail"> 
    </div> 
    <div class="form-group"> 
     <label for="eMailConfirmation">Confirm E-Mail</label> 
     <span id="eMailConfirmationError" class="error">*</span> 
     <input type="text" class="form-control" id="eMailConfirmation" name="eMailConfirmation"> 
    </div> 
    <div class="form-group"> 
     <label for="password">Password</label> 
     <span id="passwordError" class="error">*</span> 
     <input type="password" class="form-control" id="password" name="password"> 
    </div> 
    <div class="text-center"> 
     <button type="submit" class="btn btn-primary"><i class="fa fa-user-md"></i> Register</button> 
    </div> 
</form> 

回答

1

發生這種情況是因爲您的代碼正在被評估。

validateFirstName(firstName, firstNameError) == true && 
validateLastName(lastName, lastNameError) == true 

它會運行第一個函數,如果第一個名字沒有設置,它返回false。 false && (true || false)總是爲假,因此它不執行第二個功能。

正如你可以看到當你運行這個片段,只要它碰到一個false它停止執行(3是最後打印的號碼)。用或它只執行第一個功能。

function test(bool, num){ 
 
    console.log(num); 
 
    return bool; 
 
} 
 

 
var andResult = test(true, 1) && 
 
        test(true, 2) && 
 
        test(false, 3) && 
 
        test(true,4); 
 
        
 
console.log("&& result", andResult); 
 
        
 
var orResult = test(true, 1) || 
 
        test(true, 2) || 
 
        test(false, 3) || 
 
        test(true,4);     
 

 

 
console.log("|| result", orResult);

你可以運行每個功能和收集值:

var valFirstName = validateFirstName(firstName, firstNameError); 
var valLastName = validateLastName(lastName, lastNameError); 

return valFirstName && valLastName; 
+0

你會建議我把它分成兩個if語句,還是應該以完全不同的方式完成整個事情? – Aontaigh

+0

查看上面的修改 –

-1

讓你在使用邏輯與聲明,我的downvote是因爲我使用的是更接近於一個邏輯或聲明,但不完全對。這是小型演講。

邏輯AND表達式將執行語句的每個部分,直到遇到第一個假,此時整個表達式呈現爲false並且退出AND表達式。另一方面,邏輯OR語句將執行語句的每個部分,而不管真值或虛假,然後評估表達式的最終布爾值。因此,使用AND時,表達式會以第一個false結束。有兩種處理方法。

首先,您可以按照建議進行操作,並將每個驗證函數評估爲一個變量,然後在AND語句中使用所有這些函數。這樣做可以確保您的所有表單字段都已經過驗證。然後,AND語句可以簡單地確定表單是否有效。

var firstNameIsValid = validateFirstName(firstName, firstNameError), 
    lastNameIsValid = validateLastName(lastName, lastNameError); 

if (firstNameIsValid && lastNameIsValid){ 
    // Form is valid, proceed with processing 
} else { 
    // Form is invalid because SOMETHING above was false. Do some other 
    // error handling. 
} 

其次,這是我在路上(但不太接近正確響應)結合了成單個或聲明,但不是檢查,如果該字段是有效的,我們要檢查他們是無效

if (!validateFirstName(firstName, firstNameError) || !validateLastName(lastName, lastNameError)) { 
    // The above query is checking whether validate<fieldName> returned FALSE 
    // for every field. If any validate returns false, the entire form is 
    // invalid. Do any invalid form processing. 
} else { 
    // The ELSE of the above if would only pass if every form field checked has 
    // in fact, passed the validity check. At this point, the form itself is 
    // valid and any processing for valid forms can happen. 
} 

現在,儘管如此,你正在爲自己創造一個醜陋的噩夢。在這一點上,你只需要一個有效的名字和姓氏。但是如果它們包含一個數字呢?如果你想要一個只有數字的字段呢?如果你想要一個字段既是必需的又有電話號碼怎麼辦?你將不得不爲每一個案例重新創建輪子。相反,如何創建一個可以推廣到每個案例的函數呢?如果遇到沒有處理程序的情況,可以創建該程序並將其添加到廣義函數中,以便稍後可用於其他任何表單元素。

var formEl = document.getElementById("my-custom-form"); 
 
formEl.querySelector("button").addEventListener("click", function(evt) { 
 
    evt.stopPropagation(); 
 
    evt.preventDefault(); 
 

 
    var isFormValid = []; 
 
    var validateThese = [{ 
 
     fieldEl: formEl.querySelector("[name=firstName]"), 
 
     errorEl: formEl.querySelector("#firstNameError"), 
 
     checks: ["required", "alpha"] 
 
    }, { 
 
     fieldEl: formEl.querySelector("[name=lastName]"), 
 
     errorEl: formEl.querySelector("#lastNameError"), 
 
     checks: ["required", "alpha"] 
 
    }, { 
 
     fieldEl: formEl.querySelector("[name=phoneNumber]"), 
 
     errorEl: formEl.querySelector("#phoneNumberError"), 
 
     checks: ["numeric"] 
 
    }]; 
 

 
    for (var i = 0, len = validateThese.length; i < len; i++) { 
 
     isFormValid[i] = validateField(validateThese[i]); 
 
    } 
 

 
    if (isFormValid.indexOf(false) != -1) { 
 
     // If there is ANY boolean false here, then one of the fields returned 
 
     // false, so the whole form is bad. 
 
     console.log("form is bad!"); 
 
    } else { 
 
     // The entire isValid array is good, the form is good. 
 
     console.log("form is good!"); 
 
    } 
 

 
    function validateField(checkThis) { 
 
     var isValid = []; 
 
     checkThis.errorEl.innerText = ""; 
 

 
     for (var i = 0, len = checkThis.checks.length; i < len; i++) { 
 
     switch (checkThis.checks[i]) { 
 
      case "required": 
 
      isValid[i] = isRequired(checkThis.fieldEl); 
 
      if (!isValid[i]) { 
 
       checkThis.errorEl.innerHTML += "<br>Field is required!"; 
 
      } 
 
      break; 
 
      case "alpha": 
 
      isValid[i] = isAlpha(checkThis.fieldEl); 
 
      if (!isValid[i]) { 
 
       checkThis.errorEl.innerHTML += "<br>Field must be alphabetic characters only!"; 
 
      } 
 
      break; 
 
      case "numeric": 
 
      isValid[i] = isNumeric(checkThis.fieldEl); 
 
      if (!isValid[i]) { 
 
       checkThis.errorEl.innerHTML += "<br>Field must be numeric characters only!"; 
 
      } 
 
      break; 
 
      case "alphanumeric": 
 
      isValid[i] = isAlphanumeric(checkThis.fieldEl); 
 
      if (!isValid[i]) { 
 
       checkThis.errorEl.innerHTML += "<br>Field must be alphanumeric only!"; 
 
      } 
 
      break; 
 
     } // End switch 
 
     } // End for 
 

 
     if (isValid.indexOf(false) == -1) { 
 
     // isValid contains no false values, this field is ok. 
 
     return true; 
 
     } else { 
 
     // isValid contains at least one false. At least one test failed. 
 
     // field is bad. 
 
     return false; 
 
     } 
 
    } // End validateField() 
 

 
    /**** 
 
     * Below are the actual validation functions. Given a field, they'll 
 
     * check that it conforms to a few types. At this pass, it'll look for 
 
     * required, alphabetic, numeric or alphanumeric. 
 
     * 
 
     ****/ 
 

 
    function isRequired(fieldEl) { 
 
     if (fieldEl.value.length > 0) { 
 
     return true; 
 
     } else { 
 
     return false; 
 
     } 
 
    } // end function isRequired(); 
 

 
    function isAlpha(fieldEl) { 
 
     if (fieldEl.value.length > 0) { 
 
     if (/^[a-zA-Z]+$/.test(fieldEl.value)) { 
 
      return true; 
 
     } else { 
 
      return false; 
 
     } 
 
     } else { 
 
     return true; 
 
     } 
 
    } // end function isAlpha(); 
 

 
    function isNumeric(fieldEl) { 
 
     if (fieldEl.value.length > 0) { 
 
     if (/^\d+$/.test(fieldEl.value)) { 
 
      return true; 
 
     } else { 
 
      return false; 
 
     } 
 
     } else { 
 
     return true; 
 
     } 
 
    } //end function isNumeric(); 
 

 
    function isAlphanumeric(fieldEl) { 
 
     if (fieldEl.value.length > 0) { 
 
     if (/^[a-zA-Z0-9]+$/.test(fieldEl.value)) { 
 
      return true; 
 
     } else { 
 
      return false; 
 
     } 
 
     } else { 
 
     return true; 
 
     } 
 
    } // end function isAlphaumeric(); 
 

 
    }) // end button click event listener
<form id="my-custom-form" name="registrationForm"> 
 
    <div class="form-group"> 
 
    <label for="firstName">First Name</label> 
 
    <span id="firstNameError" class="error">*</span> 
 
    <input type="text" class="form-control" id="firstName" name="firstName" placeholder="required"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="lastName">Second Name</label> 
 
    <span id="lastNameError" class="error">*</span> 
 
    <input type="text" class="form-control" id="lastName" name="lastName" placeholder="required"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="phoneNumber">Phone Number</label> 
 
    <span id="phoneNumberError" class="error"></span> 
 
    <input type="text" class="form-control" id="phoneNumber" name="phoneNumber"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="eMail">E-Mail</label> 
 
    <span id="eMailError" class="error"></span> 
 
    <input type="text" class="form-control" id="eMail" name="eMail"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="eMailConfirmation">Confirm E-Mail</label> 
 
    <span id="eMailConfirmationError" class="error"></span> 
 
    <input type="text" class="form-control" id="eMailConfirmation" name="eMailConfirmation"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="password">Password</label> 
 
    <span id="passwordError" class="error"></span> 
 
    <input type="password" class="form-control" id="password" name="password"> 
 
    </div> 
 
    <div class="text-center"> 
 
    <button class="btn btn-primary"><i class="fa fa-user-md"></i> Register</button> 
 
    </div> 
 
</form>

上面的例子將遍歷對象的數組,每個對象是一個字段EL,誤差e1和一組測試中運行。 「必需」測試檢查元素的值是否大於零,並且字母/數字/字母數字測試返回true,表示無值或與其正則表達式匹配的值。後三者必須返回真正的價值。

+0

這也行不通。只要它看到第一個真實的就會停止執行。真實|| (true || false)'永遠是真的。 –

+0

你是對的。每次都需要檢查,如果ANY情況爲假,則將boolean設置爲false。我編輯了代碼以實現它。 – Snowmonkey

+0

@Aontaigh,看看最新的編輯 - 它包含一個更強大的形式檢查系統,可以很容易地擴展以適應任何形式。 – Snowmonkey

0

的問題是用JavaScript評估if語句的方式。因爲您使用的是第一個條件失敗的情況,所以即使嘗試執行第二個條件也沒有問題,因爲無論循環的結果如何((false false & true)== false)。 在你的validateLastName函數中嘗試控制檯日誌記錄的一些東西,你會看到我在說什麼;)

我找不到任何有關所有爵士樂的更多信息,但我認爲C++編譯器可以做同樣的事情。