Javascript 表单验证

Question

我试图让两个函数检查每个表单输入，一个用于 onchange()，另一个用于 onkeypress()；我这样做的原因是在您使用 onchange() 或 onblur() 离开输入字段后显示输入是否有效，并且我还想检查输入字段是否为空，以删除指示错误的消息输入是使用 onkeypress() 输入的，这样它就可以更新而不必离开该字段(如果用户要删除他们对警告消息的响应。)

它根本没有按我预期的方式工作，所以我想知道是否有明显的错误。

我的代码是这样的:

<form action="database.php" method = post>

    Username 
    <input type='text' id='un' onchange="checkname()" onkeypress="checkempty(id)" />
    <div id="name"></div><br>
    .....
</form>

和 Javascript:

<script type="text/javascript">
function checkname() {
    var name = document.getElementById("un").value;
    var pattern = /^[A-Z][A-Za-z0-9]{3,19}$/;

    if (name.search(pattern) == -1) {
        document.getElementById("name").innerHTML = "wrong";
    }
    else {
        document.getElementById("name").innerHTML = "right!";
    }
}

function checkempty(id) {
    var temp = document.getElementById(id).value;

    if (!temp) {
        document.getElementById("name").innerHTML = '';
    }
}
</script>

Answer 1

根据您在评论中的说明，我建议使用 onkeyup 事件而不是 onkeypress(onkeypress 仅跟踪生成字符的键 - backspace 没有)。切换事件将允许您在用户按下退格键时进行验证。

这是 a working fiddle .

编辑: 请参阅此 SO 问题以进一步说明:Why doesn't keypress handle the delete key and the backspace key