Question

以下代码在页面加载时循环，我无法弄清楚它为什么会这样做。是onfocus的问题吗？

 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

你正在采取的方法有几个问题，但是＆＃34;循环＆＃34;您遇到的行为是因为您使用的是alert和onFocus的组合。当您专注于输入字段并触发警报时，当您关闭警报时，浏览器将（默认情况下）重新聚焦以前具有焦点的元素。因此，在您的情况下，您将集中注意力，获得警报，它将自动重新聚焦，因此它会重新触发警报等。一遍又一遍。

更好的方法是使用input事件。这样，用户在有机会填写该字段之前不会收到错误消息提示。只有在字段中清除了某个值时，或者如果您稍后在代码中调用validateRequiredField函数（例如，在表单提交中），它们才会被提示。

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

如果您有任何问题，请与我们联系。

＆＃13;

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
    }
});

＆＃13;

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

＆＃13;

Answer 2

未经测试，但您可以试试这个

fn.addEventListener('focus', validateFirstName);
ln.addEventListener('focus', validateLastName);

Javascript表单验证代码循环

2 个答案: