使用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表单验证显示错误

回答

相关问题