Question

更新：onblur消息对于用户名而不是密码消失。任何人都可以指出为什么？

我是新手。我遇到onblur并在我的html页面中使用它，一切都很好，但对于一个字段，即使值已更正，消息也不会消失。其他领域工作得很好，这一个困扰我几个小时，我不能为我的生活弄清楚什么是错的。有人，请指出我做错了什么。

JS代码：

function checkUsername(field) {
    var x = document.getElementById("username").value;
    var regex = /^[A-Za-z0-9~@#$&_]*$/;
    document.getElementById("uname").innerText =
        (field.value === "") ? "username can't be empty" : "";
    if (!regex.test(x)) {
        document.getElementById("uname").innerHTML = "Enter a valid username";
    }
}

function checkPass(field) {
    var x = document.getElementById("passw").value;
    var regex = /^[a-z0-9]+$/;

    if (x.length < 5) {
        document.getElementById("pw").innerHTML = "Min of 5 characters needed for Passphrase";
    } else if (field.value.length > 10) {
        document.getElementById("pw").innerHTML = "Max characters for Passphrase is 10 characters";
    } else if (!regex.test(x)) {
        document.getElementById("pw").innerHTML = "Enter a valid Passphrase";
    }
}

HTML代码：

<label for="username">Username: </label>
<input type="text" id="username" name="username" onblur="checkUsername(this);" placeholder="username">
<font color='red'>
    <strong>
        <p id="uname"></p>
    </strong>
</font>

<label for="password">Password: </label>
<input type="password" id="passw" name="passw" onblur="checkPass(this);" placeholder="passphrase">
<font color='red'>
    <strong>
        <p id="pw"></p>
    </strong>
</font>

Answer 1

在javascript函数中使用另外一个else条件，这样如果一切正常，它将消息消息文本： -

<input name="options" type="radio" [value]="0"  [(ngModel)]="fifthSector.in_stock">Yes<br/>

<input name="options" type="radio" [value]="1" [(ngModel)]="fifthSector.in_stock" >No<br/>

Value:
{{fifthSector.in_stock}}

Answer 2

如果没有错误，checkUsername函数中的以下行会清除div：

document.getElementById("uname").innerText = (field.value === "") ? "username can't be empty" : "";

这就是输入成功案例时div变空的原因。如果文本输入的值不是""那么，错误div得到它; s innerHTML到""。对checkPass方法没有这样做，即使将值更正为有效值，旧的错误值也会保留。

正如@vishu所述，如果没有找到错误，您可以在checkPass方法中添加额外的其他内容以清除div。或者您可以在评估错误之前将错误div设置为空，就像您在checkUsername方法中所做的那样。

function checkPass(field) {
    var x = document.getElementById("passw").value;
    var regex = /^[a-z0-9]+$/;
    var pw = document.getElementById("pw");

    // Clear older errors if needed
    pw.innerHTML = '';

    if (x.length < 5) {
        pw.innerHTML = "Min of 5 characters needed for Passphrase";
    } else if (field.value.length > 10) {
        pw.innerHTML = "Max characters for Passphrase is 10 characters";
    } else if (!regex.test(x)) {
        pw.innerHTML = "Enter a valid Passphrase";
    }
}

所以为了回答你的问题，div不会自动清除。如果要清除它，就必须通过JS显式地执行此操作（就像在checkUsername函数中一样）

Javascript onblur事件消息不会消失

2 个答案: