如何验证 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() {

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

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

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

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

    if (fname === '') {

        errorName.innerHTML = "fname empty";

        return false;

    }

    if (mcode === '') {

        errorCode.innerHTML = "mcode empty";

        return false;

    }

    if (/^[A-Z]\D{2,30}$/.test(fname) == false) //if its true, it will go to the second input 

    {

        errorName.innerHTML = "Wrong format";

        fname.style.color = "red";

        return false;

    } else {

        errorName.innerHTML = "";

    }

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

        errorCode.innerHTML = "Wrong format";

        mcode.style.color = "red";

        return false;

    } else {

        errorCode.innerHTML = "";

    }

    return true;

}