Javascript表单验证

我试图让两个函数检查每个表单输入，一个用于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>

函数checkname（）{
var name=document.getElementById（“un”）.value；
var模式=/^[A-Z][A-Za-z0-9]{3,19}$/；
if（name.search（pattern）=-1）{
document.getElementById（“名称”）.innerHTML=“错误”；
}
否则{
document.getElementById（“name”）.innerHTML=“right！”；
}
}
函数checkempty（id）{
var temp=document.getElementById（id）.value；
如果（！temp）{
document.getElementById（“名称”）.innerHTML=''；
}
}

根据您在评论中的说明，我建议使用

onkeyup

事件，而不是

onkeypress

（

onkeypress

仅跟踪生成字符的键-

backspace

不跟踪）。切换事件将允许您在用户按下backspace时进行验证

给你

编辑：

---

请参阅此SO问题以获得进一步澄清：

此函数应在下面检查空字段

 function checkempty(id) {
   var temp = document.getElementById(id).value;
   if(temp === '' || temp.length ===0){
     alert('The field is empty');
     return;


   }


 }

//这应该适用于检查名称函数

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

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

---

它根本不是我想要的工作方式

-你能详细说明一下吗？当我完全删除输入字段时，div消息不会改变，理论上应该是这样的，因为它应该检查每一次击键，对吧？为什么不为onkeypress进行退格注册？