使用Javascript表單驗證顯示錯誤

我使用正則表達式來檢查我的用戶輸入，然後在發現錯誤時添加到名爲消息的空數組中。我無法沿着表格頂部顯示這些錯誤我正在使用正則表達式來檢查我的用戶輸入，然後在找到錯誤時添加到名爲消息的空數組中。我有沿形式使用Javascript表單驗證顯示錯誤

<script> 
function emailCheck(email) { 
    var re = /^[a-zA-Z\d]+\.[a-zA-Z\d][email protected](?:com|ca|org)$/; 
    return re.test(email); 
} 

function phoneCheck(phone) { 
    var re = /^\b\d{3}[-.]?\d{3}[-.]?\d{4}\b$/; 
    return re.test(phone); 
} 

function postalCheck(postal){ 
    var re = /^([a-zA-Z]\d[a-zA-Z])[\s\-]?(\d[a-zA-Z]\d)+$/; 
    return re.test(postal); 
} 

function streetCheck(street) { 
    var re = /^[1-9]{2,3} +[a-zA-Z]+ +(Street|street|road|Road)+$/; 
    return re.test(street); 
} 

function nameCheck(fname) { 
    var re = /^(mr\.|mrs\.|Mr\.|Mrs\.)\s+[a-zA-Z]+\s+[a-zA-Z]+$/; 
    return re.test(fname); 
} 

function errorCheck() { 
    var message = ""; 
    var email = document.forms["myForm"]["email"].value; 
    var phone = document.forms["myForm"]["phone"].value; 
    var postal = document.forms["myForm"]["postal"].value; 
    var fname = document.forms["myForm"]["fname"].value; 
    var street = document.forms["myForm"]["street"].value; 

    if(phoneCheck(phone)) { 
     alert (phone + " is valid"); 
    } 
    else{ 
     message += "Phone invalid"; 
    } 

    if(postalCheck(postal)) { 
     alert (postal + " is valid"); 
    } 
    else { 
     message += "Postal invalid"; 
    } 

    if (nameCheck(fname)) { 
     alert (fname + " is valid"); 
    } 
    else { 
     message += "name invalid"; 
    } 

    if (streetCheck(street)) { 
     alert (street + " is valid"); 
    } 
    else { 
     message += "Street invalid"; 
    } 

    if (emailCheck(email)) { 
     alert (email + " is valid"); 
    } 
    else { 
     message += "email invalid"; 
    } 
    return false; 

    $("#errorMessage").html(message); 
} 
</script>

這裏的頂部顯示這些錯誤的麻煩是HTML

<html> 
    <body> 
     <p id="errorMessage"></p> 
     <link rel='stylesheet' type='text/css' href='Lab4.css'> 
     <table> 
      <tr> 
       <td class="top"> 
        <a href=<?PHP echo $_SERVER["PHP_SELF"] ?>>&nbsp;Refresh ThisPage&nbsp;</a> 
       </td> 
       <td class="top"> 
        &nbsp;Show Logfile.txt&nbsp; 
       </td> 
       <td class="top"> 
        &nbsp;Show Logfile.txt Formatted&nbsp; 
       </td> 
       <td class="top"> 
        &nbsp;Clear logfile.txt&nbsp; 
       </td> 
      </tr> 
     </table> 
     <form name="myForm" onsubmit="errorCheck()"> 
      <table class="body"> 
       <tr> 
        <td class="column1"> 
         Full Name: 
        </td> 
        <td class="column2"> 
         <input id="fname" type="text" > 
        </td> 
        <td class="column3"> 
         Salution of Mr. and Mrs. followed by two text strings separated by any number of spaces 
        </td> 
       </tr> 
       <tr> 
        <td class="column1"> 
         Street: 
        </td> 
        <td class="column2"> 
         <input id="street" type="text" > 
        </td> 
        <td class="column3"> 
         2 or 3 digit number followed by a text string ending with Street or Road separated by any number of space 
        </td> 
       </tr> 
       <tr> 
        <td class="column1"> 
         PostalCode: 
        </td> 
        <td class="column2"> 
         <input id = "postal" type="text" > 
        </td> 
        <td class="column3"> 
         Char Char Digit optional Hyphen or space Char Digit Digit (abclxyz and number 0 not allowed. Case insensitive 
        </td> 
       </tr> 
       <tr> 
        <td class="column1"> 
         Phone: 
        </td> 
        <td class="column2"> 
         <input id = "phone" type="text" > 
        </td> 
        <td class="column3"> 
         10 digits, first 3 digits have optional parentheses, either side of digits 456 are optional space, dot or hyphen 
        </td> 
       </tr> 
       <tr> 
        <td class="column1"> 
         Email: 
        </td> 
        <td class="column2"> 
         <input id="email" type="text"> 
        </td> 
        <td class="column3"> 
         [email protected] (firstname and lastname must be 4-10 characters in length, domain may be either .com, .ca or .org) 
        </td> 
       </tr> 
      </table> 
      <br> 
      <input class="submit" type="submit" id="check" value="Submit me now!!!"/> 
     </form> 
    </body> 
</html>

來源

2016-11-23 ryanl11

您從errorCheck()返回您設置的#errorMessage內容之前。

我在返回之前調用了html()調用，並將message作爲一個數組（如您所說），因此您可以以列表格式顯示消息。

function emailCheck(email) { 
 
    var re = /^[a-zA-Z\d]+\.[a-zA-Z\d][email protected](?:com|ca|org)$/; 
 
    return re.test(email); 
 
} 
 

 
function phoneCheck(phone) { 
 
    var re = /^\b\d{3}[-.]?\d{3}[-.]?\d{4}\b$/; 
 
    return re.test(phone); 
 
} 
 

 
function postalCheck(postal) { 
 
    var re = /^([a-zA-Z]\d[a-zA-Z])[\s\-]?(\d[a-zA-Z]\d)+$/; 
 
    return re.test(postal); 
 
} 
 

 
function streetCheck(street) { 
 
    var re = /^[1-9]{2,3} +[a-zA-Z]+ +(Street|street|road|Road)+$/; 
 
    return re.test(street); 
 
} 
 

 
function nameCheck(fname) { 
 
    var re = /^(mr\.|mrs\.|Mr\.|Mrs\.)\s+[a-zA-Z]+\s+[a-zA-Z]+$/; 
 
    return re.test(fname); 
 
} 
 

 
function errorCheck() { 
 
    var message = []; 
 
    var email = document.forms["myForm"]["email"].value; 
 
    var phone = document.forms["myForm"]["phone"].value; 
 
    var postal = document.forms["myForm"]["postal"].value; 
 
    var fname = document.forms["myForm"]["fname"].value; 
 
    var street = document.forms["myForm"]["street"].value; 
 

 
    if (phoneCheck(phone)) { 
 
    alert(phone + " is valid"); 
 
    } else { 
 
    message.push("Phone invalid"); 
 
    } 
 

 
    if (postalCheck(postal)) { 
 
    alert(postal + " is valid"); 
 
    } else { 
 
    message.push("Postal invalid"); 
 
    } 
 
    if (nameCheck(fname)) { 
 
    alert(fname + " is valid"); 
 
    } else { 
 
    message.push("name invalid"); 
 
    } 
 
    if (streetCheck(street)) { 
 
    alert(street + " is valid"); 
 
    } else { 
 
    message.push("Street invalid"); 
 
    } 
 

 
    if (emailCheck(email)) { 
 
    alert(email + " is valid"); 
 
    } else { 
 
    message.push("email invalid"); 
 
    } 
 

 
    $("#errorMessage").html(`<ul><li>${message.join('</li><li>')}</li></ul>`); 
 

 
    return false; 
 

 
}

#errorMessage { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p id="errorMessage"></p> 
 

 
<table> 
 
    <tr> 
 
    <td class="top"> 
 
    </td> 
 
    <td class="top">&nbsp;Show Logfile.txt&nbsp;</td> 
 
    <td class="top">&nbsp;Show Logfile.txt Formatted&nbsp;</td> 
 
    <td class="top">&nbsp;Clear logfile.txt&nbsp;</td> 
 
    </tr> 
 
</table> 
 
<form name="myForm"> 
 
    <table class="body"> 
 
    <tr> 
 
     <td class="column1">Full Name:</td> 
 
     <td class="column2"> 
 
     <input id="fname" type="text"> 
 
     </td> 
 
     <td class="column3">Salution of Mr. and Mrs. followed by two text strings separated by any number of spaces</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="column1">Street:</td> 
 
     <td class="column2"> 
 
     <input id="street" type="text"> 
 
     </td> 
 
     <td class="column3">2 or 3 digit number followed by a text string ending with Street or Road separated by any number of space</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="column1">PostalCode:</td> 
 
     <td class="column2"> 
 
     <input id="postal" type="text"> 
 
     </td> 
 
     <td class="column3">Char Char Digit optional Hyphen or space Char Digit Digit (abclxyz and number 0 not allowed. Case insensitive</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="column1">Phone:</td> 
 
     <td class="column2"> 
 
     <input id="phone" type="text"> 
 
     </td> 
 
     <td class="column3">10 digits, first 3 digits have optional parentheses, either side of digits 456 are optional space, dot or hyphen</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="column1">Email:</td> 
 
     <td class="column2"> 
 
     <input id="email" type="text"> 
 
     </td> 
 
     <td class="column3">[email protected] (firstname and lastname must be 4-10 characters in length, domain may be either .com, .ca or .org)</td> 
 
    </tr> 
 
    </table> 
 

 
    <br> 
 

 
    <input class="submit" type="button" onclick="errorCheck()" id="check" value="Submit me now!!!" /> 
 
</form>

來源

2016-11-23 02:37:06

謝謝！有效 – ryanl11

使用Javascript表單驗證顯示錯誤

回答

相關問題