javascript - InnerHTML 多字段多报错

Question

我在尝试使用 onblur 处理程序验证表单时遇到问题。

我想要做的是让名字和姓氏字段在字段为空、少于 5 个字符、多于 18 个字符或用户输入数字时显示错误消息。

我希望能够仅使用一个函数来执行此操作，因此我不需要为单独的函数执行此操作。

例如:

function ValidateName(field) {
  var field = field.value;
  var output = document.getElementById("fnameError");
   if (field == "")
 {
   output = "field can’t be blank.";
   return false;
 }
   else
 {
   output = "";
 }
}

<form>
<input type="Text" id="Fname" onblur="ValidateName(this)">
<span id="fnameError"></span>
</form>

Answer 1

你根据问题的答案。

function ValidateName(field) {
  var output = document.getElementById("fnameError");
   if (field.value == "")
 {
   output.innerHTML = "field can’t be blank.";
 }
   else
 {
   output.innerHTML = "";
 }
}

<form>
<input type="Text" id="Fname" onblur="ValidateName(this)">
<span id="fnameError"></span>
</form>

你的答案根据对我的答案的评论。

function ValidateName() {
  var outputF = document.getElementById("fnameError");
  var outputL = document.getElementById("lnameError");
  var outputB = document.getElementById("BothError");
  var field1 =  document.getElementById("Fname");
  var field2 =  document.getElementById("Lname");
  
    if (field1.value == "" && field2.value == "")
 {
   outputF.innerHTML = "";
   outputB.innerHTML = "No field can be left blank.";
   outputL.innerHTML = "";
 }
   else if (field1.value !== "" && field2.value == "") 
{
   outputF.innerHTML = "";
   outputB.innerHTML = "";
   outputL.innerHTML = "field can’t be blank.";
   }
   else if (field1.value == "" && field2.value !== "")
   {
   outputF.innerHTML = "field can’t be blank.";
   outputB.innerHTML = "";
   outputL.innerHTML = "";
   }
else {
   outputF.innerHTML = "";
   outputB.innerHTML = "";
   outputL.innerHTML = "";
 }
}

<form>
<input type="Text" id="Fname" onblur="ValidateName()">
<span id="fnameError"></span>
<br><br>
<input type="Text" id="Lname" onblur="ValidateName()">
<span id="lnameError"></span>
<br><br>
<span id="BothError"></span>
</form>