为什么javascript的输出只显示了很短的时间？

Question

我正在为我的作业开发一个注册表单。一切正常，但是当我单击提交按钮时，标签上的警告消息只会显示很短的一段时间。我正在使用 eclipse 和 apache tomacat。这是我的代码。 JSP 代码：

<form method="post">
<h2>Welcome to AP Auctions. Please Enter Bid</h2>
<span id="msg" style="color:red;font-size:25px"></span><br/>
<label id="itemid_l">Item Id:</label> <input type="text" name="itemid" id="itemid"/><br/>
<label id="itemname_l">Item Name:</label> <input type="text" name="itemname" id="itemname"/><br/>
<label id="uname_l">Your Name:</label> <input type="text" name="uname" id="uname"/><br/>
<label id="email_l">Your Email Address:</label> <input type="text" name="email" id="email"/><br/>
<label id="amount_l">Amount Bid:</label> <input type="number" name="amount" id="amount"/><br/>
<label id="autoincrement_l">Auto-increment to match other bidders:</label><input type="checkbox" name="autoincrement" id="autoincrement"><br/>
<input type="submit" value="Submit Bid" onclick="validate()"/>
</form>

Javascript 代码：

function validate()
{
    var itemid=document.getElementById("itemid").value;
    var itemname=document.getElementById("itemname").value;
    var uname=document.getElementById("uname").value;
    var email=document.getElementById("email").value;
    var amount=document.getElementById("amount").value;
    var autoincrement=document.getElementById("autoincrement");
    var flag=true;
    if(itemid.length==0){
    flag=false;
    document.getElementById("itemid_l").innerHTML="<b>Required field!</b> Item Id: ";
    }
    if(itemname.length==0){
    flag=false;
    document.getElementById("itemname_l").innerHTML="<b>Required field!</b> Item Name: ";
    }
    if(uname.length==0){
    flag=false;
    document.getElementById("uname_l").innerHTML="<b>Required field!</b> Your Name: ";
    }
    if(email.length==0){
    flag=false;
    document.getElementById("email_l").innerHTML="<b>Required field!</b> Your Email Address: ";
    }
    if(amount.length==0){
    flag=false;
    document.getElementById("amount_l").innerHTML="<b>Required field!</b> Amount Bid: ";
    }
    if(!autoincrement.checked){
    flag=false;
    document.getElementById("autoincrement_l").innerHTML="<b>Required field!</b> Auto-increment to match other bidders:: ";
    }
    if(flag==true){     
        alert('Good job!!');
        return true;
    }
    else
    {
        document.getElementById("msg").innerHTML="Required data is missing. Please fill";
        return false;
    }
}

任何建议都会对我有很大帮助..

Answer 1

您可以使用 onsubmit 事件，这样每当用户点击 submit 按钮时，就会调用该函数，如果函数 validate() 返回 true 表单将被提交，否则不会提交表单。

演示代码：

function validate() {
  var itemid = document.getElementById("itemid").value;
  var itemname = document.getElementById("itemname").value;
  var uname = document.getElementById("uname").value;
  var email = document.getElementById("email").value;
  var amount = document.getElementById("amount").value;
  var autoincrement = document.getElementById("autoincrement");
  var flag = true;
  if (itemid.length == 0) {
    flag = false;
    document.getElementById("itemid_l").innerHTML = "<b>Required field!</b> ";
  } else {
    //if fill remove error any
    document.getElementById("itemid_l").innerHTML = ""
  }
  if (itemname.length == 0) {
    flag = false;
    document.getElementById("itemname_l").innerHTML = "<b>Required field!</b> ";
  } else {
    //if fill remove error any
    document.getElementById("itemname_l").innerHTML = "";
  }
  if (uname.length == 0) {
    flag = false;
    document.getElementById("uname_l").innerHTML = "<b>Required field!</b>  ";
  } else {
    document.getElementById("uname_l").innerHTML = "";
  }
  if (email.length == 0) {
    flag = false;
    document.getElementById("email_l").innerHTML = "<b>Required field!</b> ";
  } else {
    document.getElementById("email_l").innerHTML = "";
  }
  if (amount.length == 0) {
    flag = false;
    document.getElementById("amount_l").innerHTML = "<b>Required field!</b>";
  } else {
    document.getElementById("amount_l").innerHTML = "";
  }
  if (!autoincrement.checked) {
    flag = false;
    document.getElementById("autoincrement_l").innerHTML = "<b>Required field!</b>";
  } else {
    document.getElementById("autoincrement_l").innerHTML = "";

  }
  if (flag == true) {
    document.getElementById("msg").innerHTML = "";
    alert('Good job!!');
    flag = true; //do true
  } else {
    document.getElementById("msg").innerHTML = "Required data is missing. Please fill";
    flag = false; //do false
  }
  return flag; //return flag
}

<!--add onsubmit -->
<form method="post" id="forms" onsubmit="return validate()">
  <h2>Welcome to AP Auctions. Please Enter Bid</h2>
  <span id="msg" style="color:red;font-size:25px"></span><br/>
  <!--give id to span instead of label-->
  <label> <span id="itemid_l"></span>Item Id:</label> <input type="text" name="itemid" id="itemid" /><br/>
  <label><span id="itemname_l"></span>Item Name:</label> <input type="text" name="itemname" id="itemname" /><br/>
  <label><span id="uname_l"></span>Your Name:</label> <input type="text" name="uname" id="uname" /><br/>
  <label><span id="email_l"></span>Your Email Address:</label> <input type="text" name="email" id="email" /><br/>
  <label><span id="amount_l"></span>Amount Bid:</label> <input type="number" name="amount" id="amount" /><br/>
  <label><span id="autoincrement_l"></span>Auto-increment to match other bidders:</label><input type="checkbox" name="autoincrement" id="autoincrement"><br/>
  <input type="submit" value="Submit Bid" />
</form>

另外，如果您只需要检查空字段，您可以在输入标签上使用required 属性，如下所示：

<form method="post">
<h2>Welcome to AP Auctions. Please Enter Bid</h2>
<span id="msg" style="color:red;font-size:25px"></span><br/>
<!--added required attribute-->
<label id="itemid_l">Item Id:</label> <input type="text" name="itemid" id="itemid" required/><br/>
<label id="itemname_l">Item Name:</label> <input type="text" name="itemname" id="itemname" required/><br/>
<label id="uname_l">Your Name:</label> <input type="text" name="uname" id="uname" required/><br/>
<label id="email_l">Your Email Address:</label> <input type="text" name="email" id="email" required/><br/>
<label id="amount_l">Amount Bid:</label> <input type="number" name="amount" id="amount"required/><br/>
<label id="autoincrement_l">Auto-increment to match other bidders:</label><input type="checkbox" name="autoincrement" id="autoincrement" required><br/>
<input type="submit" value="Submit Bid"/>
</form>