表單驗證幾乎在每一個需要注冊或者登陸的網站是必不可少的，有些驗證則非常的復雜，可以說是各種各樣給你的要求，不過本章節只介紹一下表單中最簡單的驗證方式，就是判斷是否為空，有些要求比較低的網站對此已經滿足需要了。
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://m.survivalescaperooms.com/" /> <title>js簡單表單驗證</title> <script type="text/javascript">window.onload=function(){var bt=document.getElementById("bt");bt.onclick=function(){if(document.myform.name.value==""){alert("用戶名不能為空!");document.myform.name.focus();return false;} else if(document.myform.pw.value==""){alert("密碼不能為空!");document.myform.pw.focus();return false; }}}</script></head><body><form action="index.php" method="get" name="myform"><ul><li>姓名:<input type="text" name="name" id="name" /></li><li>密碼:<input type="text" name="pw" id="age" /></li><li><input type="submit" id="bt"/></li></ul> </form></body></html>以上代碼，當點擊提交按鈕的時候，能夠進行簡單的表單驗證，如果表單項為空，那么就會彈出提示，并且將焦點放入當前表單項，代碼比較簡單，這里距不多介紹了，可以參閱相關閱讀。
下面在來看下js驗證表單實例代碼：
gspan.html
<html> <head> <title>表單驗證實例</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-" /> <script src="check.js" type="text/javascript"></script> <style> span{ font-size:px; } .stats{ color : #ccc; } .stats{ color :black; } .stats{ color :red; } .stats{ color :green; } </style> </head> <body> <form method="post" action="reg.php" onsubmit="return regs('click')" > 用戶名：<input type="text" name="username" /><span class="stats">用戶名不能為空</span><br/> 郵箱：<input type="text" name="email" /><span class="stats">郵箱不能為空</span><br/> 密碼：<input type="password" name="password" /><span class="stats">密碼不能為空</span><br/> 確認密碼：<input type="password" name="chkpass" /><span class="stats">密碼不能為空</span><br/> <input type="submit" /> </form> </body> </html>check.js
function gspan(cobj){ //獲取表單后的span 標簽 顯示提示信息if (cobj.nextSibling.nodeName != 'SPAN'){ gspan(cobj.nextSibling); } else { return cobj.nextSibling;}} //檢查表單 obj【表單對象】， info【提示信息】 fun【處理函數】 click 【是否需要單擊， 提交時候需要觸發】 function check(obj, info, fun, click){ var sp = gspan(obj); obj.onfocus = function(){ sp.innerHTML = info; sp.className = 'stats';}obj.onblur = function(){if (fun(this.value)){sp.innerHTML = "輸入正確！";sp.className = "stats";} else {sp.innerHTML = info;sp.className = "stats";}}if (click == 'click'){obj.onblur();}}onload = regs; //頁面載入完執行function regs(click){var stat = true; //返回狀態， 提交數據時用到username = document.getElementsByName('username')[];password = document.getElementsByName('password')[];chkpass = document.getElementsByName('chkpass')[];email = document.getElementsByName('email')[];check(username, "用戶名的長度在-之間", function(val){if (val.match(/^/S+$/) && val.length >= && val.length <=){return true;} else {stat = false;return false;}}, click);check(password, "密碼必須在-位之間", function(val){if (val.match(/^/S+$/) && val.length >= && val.length <=){return true;} else {stat = false;return false;}}, click);check(chkpass, "確定密碼要和上面一致，規則也要相同", function(val){if (val.match(/^/S+$/) && val.length >= && val.length <= && val == password.value){return true;} else {stat = false;return false;}}, click);check(email, "請按郵箱規則輸入", function(val){if (val.match(//w+@/w+/./w/)){return true;} else {stat = false;return false;}}, click);return stat;}新聞熱點
疑難解答
