Javascript表单验证

Javascript form validation

本文关键字：验证 表单 Javascript      更新时间：2023-09-26

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

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

这是一把能用的小提琴。

编辑:

为什么't keypress不能处理删除键和退格键

下面的函数应该检查空字段;

 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!";
  }
}
相关文章：