Question

我正在使用Regex检查我的用户输入，然后在发现错误时添加到一个名为message的空数组。我无法在表单顶部显示这些错误我正在使用Regex检查我的用户输入，然后在发现错误时添加一个名为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>

Answer 1

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

我在返回之前移动了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>

无法使用Javascript表单验证显示错误

1 个答案: