堆栈内存溢出
  繁体   English   中英

无法显示Javascript表单验证错误

[英]Having trouble displaying errors with Javascript Form Validation

 原文  2016-11-23 02:26:09  5   1    javascript/ jquery

问题描述

我正在使用正则表达式检查我的用户输入，然后在发现错误时将其添加到名为message的空数组中。 我在使用正则表达式检查用户输入，然后在发现错误时将其添加到名为message的空数组的表单顶部显示这些错误。 我无法在表格顶部显示这些错误 

<script>
function emailCheck(email) {
    var re = /^[a-zA-Z\d]+\.[a-zA-Z\d]+@mohawkcollege.(?: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">
                        firstname.lastname@mohawkcollege.domain (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>

1 个解决方案

解决方案1
 0 已采纳  2016-11-23 02:37:06

在设置#errorMessage的内容之前，您要从errorCheck()返回。

我在返回之前移动了html()调用，并将message为数组（如您所说），以便可以列表格式显示消息。 

 function emailCheck(email) { var re = /^[a-zA-Z\\d]+\\.[a-zA-Z\\d]+@mohawkcollege.(?: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">firstname.lastname@mohawkcollege.domain (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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 JavaScript表单验证不显示错误 使用JavaScript进行模糊表单验证时遇到问题 表单验证有问题 无法在JavaScript中显示数组 显示javascript数组时遇到问题 JavaScript表单验证错误 JavaScript 表单验证出现问题 Function 我在验证和表单向导方面遇到问题 使用 javascript 显示我的号码时遇到问题 显示Javascript表单验证消息
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM