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表單驗證

回答

相關問題