如何验证 HTML 表单上的两个输入字段？

Question

我想要两个输入，一个是名称，另一个是模块代码。

如果任一字段的模式错误或一个字段为空，我如何在任一输入上显示错误消息？

很确定我的 if-else 语句有问题：//

当我单击提交时，表单操作将被激活。

感谢所有帮助:)

function validateForm() {

  var fname = document.getElementById("fname").value;

  if (/^[A-Z]\D{2,30}$/.test(fname) == false) {

  //if its true, it will go to the second input

    document.getElementById("errorName").innerHTML = "Wrong format";

    fname.style.color="red";

    return false;

  } else {

    document.getElementById("errorName").innerHTML = "";

  }

    

  var mcode = document.getElementById("mcode").value;

  if (/^[a-z]{3}[1-9]\d{4}$/.test(mcode) == false) {

    document.getElementById("errorCode").innerHTML = "Wrong format";

    mcode.style.color="red";

    return false;

  } else {

    document.getElementById("errorCode").innerHTML = "";

  }

  return true;

}

<form action="handleServer.php" method="get" onSubmit="return validateForm()">

  First name: </br>

  <input id="fname" type="text" name="fname" size="30"> 

  <span id="errorName" class="error"></br> 

  

  <!-- module code -->

  Module code: </br>

  <input id="mcode" type="text" name="mcode" size="30"> 

  <input type="submit" value="Submit">

  <span id="errorCode" class="error"></br>

Answer 1

你可以做这样的事情来检查输入字段是否为空function validateForm() {&nbsp; &nbsp; var fname = document.getElementById("fname").value;&nbsp; &nbsp; var mcode = document.getElementById("mcode").value;&nbsp; &nbsp; var errorName = document.getElementById("errorName");&nbsp; &nbsp; var errorCode = document.getElementById("errorCode");&nbsp; &nbsp; if (fname === '') {&nbsp; &nbsp; &nbsp; &nbsp; errorName.innerHTML = "fname empty";&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; }&nbsp; &nbsp; if (mcode === '') {&nbsp; &nbsp; &nbsp; &nbsp; errorCode.innerHTML = "mcode empty";&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; }&nbsp; &nbsp; if (/^[A-Z]\D{2,30}$/.test(fname) == false) //if its true, it will go to the second input&nbsp;&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; errorName.innerHTML = "Wrong format";&nbsp; &nbsp; &nbsp; &nbsp; fname.style.color = "red";&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; errorName.innerHTML = "";&nbsp; &nbsp; }&nbsp; &nbsp; if (/^[a-z]{3}[1-9]\d{4}$/.test(mcode) == false) {&nbsp; &nbsp; &nbsp; &nbsp; errorCode.innerHTML = "Wrong format";&nbsp; &nbsp; &nbsp; &nbsp; mcode.style.color = "red";&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; errorCode.innerHTML = "";&nbsp; &nbsp; }&nbsp; &nbsp; return true;}