在web開發中,表單是經常用到的一種交互元素。而javascript可以通過控制表單,實現一些妙手偶得的效果。比如數據合法性驗證、禁止非法輸入等等。
以數據合法性驗證為例,我們可以使用javascript控制表單,使用戶在提交數據之前,先對數據進行驗證并進行錯誤提示,以達到數據有效性的目的。
<form id="myForm" name="myForm"> <input type="text" id="username" name="username"/> <input type="password" id="password" name="password"/> <button type="button" onclick="validateForm()">提交</button> </form> <script type="text/javascript"> function validateForm() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; if(username === "" || password === "") { alert("用戶名和密碼不能為空!"); return false; } return true; } </script>
上面代碼中,我們使用了javascript對表單的控制。validateForm函數用于檢查表單是否合法,若用戶名或密碼為空,則彈出錯誤提示框并返回false,表示表單不合法。否則返回true,表示表單合法,可以進行提交。
還有一個常見的問題就是禁止非法輸入,比如我們要規定某個文本框只能輸入數字。此時我們可以使用javascript的onkeydown事件來捕捉用戶的輸入,當輸入不是數字時就阻止輸入。
<input type="text" onkeydown="if(event.keyCode<48 || event.keyCode>57) event.returnValue=false"/>
上面代碼中,當用戶按下鍵盤時,javascript的onkeydown事件會被觸發,檢查按鍵的ASCII碼是否在數字范圍內,若不是,則阻止輸入。
除此之外,javascript還有很多強大的控制表單的方法,需要我們在實際開發中,結合業務需求靈活使用。