Javascript正則表達式來驗證表單驗證

所以基本上它是表單驗證。在reg ex檢查fullname.value的if語句中，我無法弄清楚爲什麼它不會將錯誤消息添加到數組中。我已經用前面的NOT進行了測試，但仍然沒有進入else if語句塊來添加錯誤消息，或者完全跳過它。我已經添加了下面的代碼，並且我已經評論過這個部分，它並不起作用，我認爲它會在我的腦海中。向下看腳本區域。Javascript正則表達式來驗證表單驗證

<html> 
<head> 
    <title>Form Validation</title> 
    <style type="text/css"> 
     #error {color:red;} 
    </style> 
</head> 
<body> 
    <h1>Form Validation with Reg Expressions</h1> 
    <div id="error"> 
    </div> 
    <form method="post" action="https://csu.mohawkcollege.ca/tooltime/echo.php" onSubmit="return validateForm(this)"> 
     <div> 
      <label for="fullname">Full Name:</label> 
      <input id="fullname" type="text" name="fullname"/> 
      Salutation of Mr. or Mrs. followed by two text strings separated by any number of spaces. 
     </div> 
     <div> 
      <label for="street">Street:</label> 
      <input id="street" type="text" name="street"/> 
      2 or 3 digit number followed by a text string ending with Street or Road separated by any number of spaces. 
     </div> 
     <div> 
      <label for="postalcode">Postal Code:</label> 
      <input id="postalcode" type="text" name="postalcode"/> 
      Char Char Digit optional Hyphen or space Char Digit Digit (abclxyz and number 0 not allowed. Case insensitive.) 
     </div> 
     <div> 
      <label for="phone">Phone:</label> 
      <input id="phone" type="text" name="phone"/> 
      10 digits, first 3 digits have optional parentheses, either side of digits 456 are optional space, dot or hyphen. 
     </div> 
     <div> 
      <label for="email">Email:</label> 
      <input id="email" type="text" name="email"/> 
      [email protected] (firstname and lastname must be 4-10 characters in length, domain may be either .com, .ca, or .org) 
     </div> 
     <input type="submit"/> 
    </form> 
<script type="text/javascript"> 
    var displayErrorMessage = document.getElementById("error"); 

    function validateForm(form) 
    { 
     displayErrorMessage.innerHTML = ""; 

     var errorMessages = []; 

     alert("validate function entered"); 

     // ERROR HAPPENS HERE!! 
     // DOES NOT SEEM TO GET INTO THE ELSE IF BLOCK TO ADD ERROR MESSAGE TO THE ARRAY 
     if (form.fullname.value == "") errorMessages.push("Full Name cannot be empty"); 
     else if (!/^(Mr\.|Mrs\.) *[a-zA-Z]+ *[a-zA-Z]+$/.match(form.fullname.value)) 
     { 
      errorMessages.push("Name format error. Ex. Mr. John Smith"); 
     } 

     if (form.street.value == "") errorMessages.push("Street cannot be empty"); 

     if (form.postalcode.value == "") errorMessages.push("Postal Code cannot be empty"); 

     if (form.phone.value == "") errorMessages.push("Phone cannot be empty"); 

     if (form.email.value == "") errorMessages.push("Email cannot be empty"); 

     alert(errorMessages.length); 

     if (errorMessages.length == 5) 
     { 
      var unorderedList = document.createElement("ul"); 
      var list = document.createElement("li"); 

      list.innerHTML = "Please fill something in. All fields are blank!"; 

      unorderedList.appendChild(list); 

      displayErrorMessage.appendChild(unorderedList); 

      return false; 
     } 
     else if (errorMessages.length > 0) 
     { 
      var unorderedList = document.createElement("ul"); 

      for (var n in errorMessages) 
      { 
       var list = document.createElement("li"); 
       list.innerHTML = errorMessages[n]; 
       unorderedList.appendChild(list); 
      } 

      displayErrorMessage.appendChild(unorderedList); 

      return false; 
     } 
     else 
     { 
      alert("Got your info -- now the form will be submitted!"); 
      return true; 
     } 
    } 
</script> 
</body>

來源

2013-11-27 khmer2040

您是否嘗試過將'form.fullname.value'打印到控制檯以檢查它是您期望的？ – OGHaza

嘗試使用

!form.fullname.value.match(/^(Mr\.|Mrs\.) *[a-zA-Z]+ *[a-zA-Z]+$/)

的方法是string.match(regexp)不是相反。例如

'Mr. OG Haza'.match(/^(Mr\.|Mrs\.) *[a-zA-Z]+ *[a-zA-Z]+$/) 
Output: ["Mr. OG Haza", "Mr."]

來源

2013-11-27 20:43:35 OGHaza

非常感謝你，這完全工作！^_^ – khmer2040

沒問題。 :-P – OGHaza

Javascript正則表達式來驗證表單驗證

回答

相關問題