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

Question

我想要两个输入，一个是名称，另一个是模块代码。
如果任一字段的模式错误或一个字段为空，我如何在任一输入上显示错误消息？
很确定我的 if-else 语句有问题：//
当我点击提交时，表单操作将被激活。
感谢所有帮助:)

 function validateForm() { var fname = document.getElementById("fname").value; if (/^[AZ]\\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 (/^[az]{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;
}