Javascript 表单验证代码循环

Question

以下代码在页面加载时循环，我不明白为什么会这样做。是焦点问题吗？

 alert("JS is working");

function validateFirstName() {
    alert("validateFirstName was called");
    var x = document.forms["info"]["fname"].value;
    if (x == "") {
        alert("First name must be filled out");
        //return false;
    }
}

function validateLastName()
{
    alert("validateLastName was called");
    var y = document.forms["info"]["lname"].value;
    if (y == "") {
        alert("Last name must be filled out");
        //return false;
    }
}

var fn = document.getElementById("fn");
var ln = document.getElementById("ln");

fn.onfocus = validateFirstName();
alert("in between");
ln.onfocus = validateLastName();

Answer 1

您为实现此目的而采取的方法存在一些问题，但您遇到的“循环”行为是因为您结合使用了 alert 和 onFocus。当您将注意力集中在输入字段上并触发警报时，当您消除警报时，浏览器将(默认情况下)重新聚焦先前具有焦点的元素。因此，在您的情况下，您会集中注意力，收到警报，它会自动重新集中焦点，因此会重新触发警报，等等。

更好的方法是使用 input 事件。这样，用户在有机会填写字段之前就不会收到错误消息提示。仅当他们清除字段中的值，或者稍后在代码中调用 validateRequiredField 函数(例如，在表单提交时)时，才会出现提示。

我还更改了您的验证函数，因此您不必为表单上的每个输入创建一个验证函数，该函数执行完全相同的操作，除了吐出略有不同的消息之外。您还应该抽象定义对验证函数之外的每个错误执行什么操作的功能 - 这是出于可测试性和可重用性的目的。

如果您有任何疑问，请告诉我。

function validateRequiredField(fieldLabel, value) {
    var errors = "";
    if (value === "") {
        //alert(fieldLabel + " must be filled out");
        errors += fieldLabel + " must be filled out\n";
    }
    return errors;
}

var fn = document.getElementById("fn");
var ln = document.getElementById("ln");

fn.addEventListener("input", function (event) {
    var val = event.target.value;
    var errors = validateRequiredField("First Name", val);
    if (errors !== "") {
        alert(errors);
    }
    else {
        // proceed
    }
});

ln.addEventListener("input", function (event) {
    var val = event.target.value;
    var errors = validateRequiredField("Last Name", val);
    if (errors !== "") {
        alert(errors);
    }
    else {
        // proceed
    }
});

<form name="myForm">
  <label>First Name: <input id="fn" /></label><br/><br/>
  <label>Last Name: <input id="ln"/></label>
</form>