Javascript表单验证

我想要两个函数检查每个表单输入，一个用于onchange（），另一个用于onkeypress（）;我的理由是在使用onchange（）或onblur（）离开输入字段时显示输入是否有效，并且我还想检查输入字段是否为空，以删除指示不良的消息输入是使用onkeypress（）输入的，这样它就可以在不离开该字段的情况下进行更新（如果用户要删除他们对警告消息的回应）。Javascript表单验证

它只是不按我想要的方式工作，所以我想知道是否有明显的错误。

我的代码如下所示：

<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>

来源

2011-11-28 Sam

工作'那根本不是工作，我intended'的方式 - 你能解释一下？ –

那么当我完全删除输入字段时，div消息不会改变，理论上应该是因为它应该检查每个击键，对吗？ – Sam

根据您的澄清的意见，我会建议使用onkeyup事件，而不是onkeypress（onkeypress只跟踪键生成字符 - backspace不）。切换事件将允许您验证用户何时按下退格键。

这是a working fiddle。

编辑： 见进一步澄清这太问题：Why doesn't keypress handle the delete key and the backspace key

来源

2011-11-28 19:12:51

为什么不会退格注册onkeypress？ – Sam

@Sam，请参阅编辑进行澄清。 –

这个功能应该低于应检查空字段;

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

来源

2013-02-28 13:33:53 EBIWARI

Javascript表单验证

回答

相关问题