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

Answer 2

此功能应在下面检查空字段;

 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!";
  }
}

Javascript表单验证

2 个答案: