Javascript消息警告框

Question

我有这个javascript代码：

function validate()
{

    var email=document.getElementById('email').value;


    var emailRegex=/^[a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,6}$/;
    var emailResult=emailRegex.test(email);
    alert("email:" +emailResult);
}

和html部分，放在form标签上：

<input type="text" id="email" placeholder="EMAIL"><br><br>
<input type="submit" value="REGISTER" id="butt">

我希望每次Regex的测试返回false时都打印一条消息，但我不想使用警告框。我该怎么做呢？

表格：

         <form id="registration" onsubmit="validate()">
                <h3>S'ENREGISTRER</h3>
                <label for="button">FULL NAME: </label>
                <small>*</small>
                <input type="text" name="fname" id="fullname" placeholder="FULL NAME"><br><br>
                <label for="button">LAST NAME:</label>
                <small>*</small>
                <input type="text" name="lname" id="lastname" placeholder="LAST NAME"><br><br>
                <label for="button">USERNAME:</label>
                <small>*</small>
                <input type="text" name="uname" id="username" placeholder="USERNAME"><br><br>
                <label for="button">PASSWORD:</label>
                <small>*</small>
                <input type="password" name="pass" id="password" placeholder="PASSWORD"><br><br>
                <label id = "kjo" for="button">EMAIL:</label>
                <small>*</small>
                <input type="text" id="email" placeholder="EMAIL"><br><br>
                <input type="submit" value="REGISTER" id="butt" onclick="validate()">
                <p id="result"></p>
                <br><br>
                <a href="login.html">LOGIN</a>
            </form>

Answer 1

一种可能是添加一个p标记(或div、span等)，它用作显示测试结果的“字段”。

在本例中，我使用了一个p标记。要打印结果，我像这样使用innerText：

​

function validate() {

  var email = document.getElementById('email').value;


  var emailRegex = /^[a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,6}$/;
  var emailResult = emailRegex.test(email);
  //alert("email:" + emailResult);
  // Show result withing the added p tag
  document.getElementById('result').innerText = "email: " + emailResult;
}

<input type="text" id="email" placeholder="EMAIL"><br><br>
<input type="submit" value="REGISTER" id="butt" onclick="validate()">
<p id="result"></p>

​

PS:我还添加了onclick属性到你的按钮，当按钮get被点击时触发函数。

编辑：

如果您希望在提交表单后显示错误消息，您可能需要查看PHP。在客户端使用JavaScript (我们正在做的事情)，你不能做到这一点。

解决此问题的一种方法是，如果电子邮件无效，则阻止表单提交：

​

function validate(event) { // Mind the "event" parameter here

  var email = document.getElementById('email').value;


  var emailRegex = /^[a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,6}$/;
  var emailResult = emailRegex.test(email);
  //alert("email:" + emailResult);

  // Check if the email is invalid. If not, dont' submit the form
  if (emailResult == false) {
    event.preventDefault(); // This line prevents the form from submitting
    document.getElementById('result').innerText = "email: " + emailResult;
  }
}

<form id="registration" onsubmit="validate(event)"> <!-- mind the "event" parameter here -->
  <h3>S'ENREGISTRER</h3> 
  <label for="button">FULL NAME: </label>
  <small>*</small>
  <input type="text" name="fname" id="fullname" placeholder="FULL NAME"><br><br>
  <label for="button">LAST NAME:</label>
  <small>*</small>
  <input type="text" name="lname" id="lastname" placeholder="LAST NAME"><br><br>
  <label for="button">USERNAME:</label>
  <small>*</small>
  <input type="text" name="uname" id="username" placeholder="USERNAME"><br><br>
  <label for="button">PASSWORD:</label>
  <small>*</small>
  <input type="password" name="pass" id="password" placeholder="PASSWORD"><br><br>
  <label id="kjo" for="button">EMAIL:</label>
  <small>*</small>
  <input type="text" id="email" placeholder="EMAIL"><br><br>
  <input type="submit" value="REGISTER" id="butt"> <!-- I removed the onclick attribute here because it's already in the form tag -->
  <p id="result"></p>
  <br><br>
  <a href="login.html">LOGIN</a>
</form>
<p id="result"></p>

​

Answer 2

正如前面的答案所说，您可以在每个要验证的字段后面插入一个标记来显示结果。

对于你提到的邮件，我写了显示错误信息的部分，如下所示。

​

Element.prototype.remove = function() {
  this.parentElement.removeChild(this);
};
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
  for (var i = this.length - 1; i >= 0; i--) {
    if (this[i] && this[i].parentElement) {
      this[i].parentElement.removeChild(this[i]);
    }
  }
};

function insertAfter(newNode, referenceNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

function validate(event) {
  var emailInput = document.getElementById("email");
  var email = emailInput.value;

  var emailRegex = /^[a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,6}$/;
  var emailResult = emailRegex.test(email);
  if (!emailResult) {
    var errorDiv = document.getElementById("error");
    if (!errorDiv) {
      var div = document.createElement("div");
      div.innerHTML = "Insert a valid Email";
      div.classList.add("error");
      div.id = "error";
      insertAfter(div, emailInput);
      emailInput.classList.add("error-input");
    }
    event.preventDefault();
  } else {
    var errorDiv = document.getElementById("error");
    if (errorDiv) {
      errorDiv.remove();
      emailInput.classList.remove("error-input");
    }
  }
}

.error {
  color: red;
}

.error-input {
  border: 1px solid red;
  border-radius: 5px;
  padding: 5px
}

<form id="registration" onsubmit="validate()">
  <h3>S'ENREGISTRER</h3>
  <label for="button">FULL NAME: </label>
  <small>*</small>
  <input type="text" name="fname" id="fullname" placeholder="FULL NAME"><br><br>
  <label for="button">LAST NAME:</label>
  <small>*</small>
  <input type="text" name="lname" id="lastname" placeholder="LAST NAME"><br><br>
  <label for="button">USERNAME:</label>
  <small>*</small>
  <input type="text" name="uname" id="username" placeholder="USERNAME"><br><br>
  <label for="button">PASSWORD:</label>
  <small>*</small>
  <input type="password" name="pass" id="password" placeholder="PASSWORD"><br><br>
  <label id="kjo" for="button">EMAIL:</label>
  <small>*</small>
  <input type="text" id="email" placeholder="EMAIL"><br><br>
  <input type="submit" value="REGISTER" id="butt" onclick="validate(event)">
  <p id="result"></p>
  <br><br>
  <a href="login.html">LOGIN</a>

</form>

​

您还可以为您的字段编写事件侦听器onchange、onmouseout或onfocusout，以便在每次更改后立即验证它们。

希望这能有所帮助。