Question

目前我有以下代码，我听说我不应该使用alert功能，它是老式的等等。
我可以使用什么来代替alert？

document.getElementById("practiseForm").onsubmit = function() {
    if(document.getElementById("fname").value.trim() === ""){
        alert("First Name Field Cannot Be Blank");
        allowsubmit = false;
    }
    if(document.getElementById("lname").value.trim() === ""){
        alert("Last Name Field Cannot Be Blank");
        allowsubmit = false;
    } 
    var email = document.getElementById('email');
    var emailRegEx = /[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}/;
    if (!emailRegEx.test(email.value)) {
        alert("Invalid Email address");
        return false;
    }
}

Fiddle

Answer 1

我更新了您的小提琴，以提供内联错误消息的示例：

document.getElementById("practiseForm").onsubmit = function() {
  var fName = document.getElementById("fname");
  var fNameError = fName.nextElementSibling;
  var lName = document.getElementById("lname");
  var lNameError = lName.nextElementSibling;
  if(fName.value.trim() === ""){
    fNameError.innerHTML = "First Name Field Cannot Be Blank";
    allowsubmit = false;
  } else {
      fNameError.innerHTML = "";
  }
  if(document.getElementById("lname").value.trim() === ""){
    lNameError.innerHTML = "Last Name Field Cannot Be Blank";
    allowsubmit = false;
  } else {
    lNameError.innerHTML = "";  
  }
  var email = document.getElementById('email');
  var emailError = email.nextElementSibling;
  var emailRegEx = /[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}/;
  if (!emailRegEx.test(email.value)) {
    emailError.innerHTML = "Error in e-mail format";
    return false;
  } else {
    emailError.innerHTML = "";
  }
}

http://jsfiddle.net/Ty8AQ/10/

Answer 2

这里有很多可能性，网上有很多例子。

有可能创建一个＆＃39; error-div＆＃39;你把所有的错误信息放在哪里。如果你想要你可以设置div（颜色红等等）

<强> HTML

<ul class="error-messages">
</ul>

<强> JS

var li = document.createElement("li");
li.innerHTML = "Insert error message here";
document.querySelector("#ul.error-messages").appendChild(li);

<强> CSS

.error-messages{color: red}

另一种可能性是文本框旁边的内联错误消息
将鼠标悬停在输入字段
...

形式验证有点优雅

2 个答案: