<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.dbjr.com.cn/" /> 
<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>

以上代碼，當(dāng)點擊提交按鈕的時候，能夠進(jìn)行簡單的表單驗證，如果表單項為空，那么就會彈出提示，并且將焦點放入當(dāng)前表單項，代碼比較簡單，這里距不多介紹了，可以參閱相關(guān)閱讀。

下面在來看下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/> 
 確認(rèn)密碼：<input type="password" name="chkpass" /><span class="stats">密碼不能為空</span><br/>
 <input type="submit" />
 </form>
 </body>
 </html>

check.js

function gspan(cobj){ //獲取表單后的span 標(biāo)簽 顯示提示信息
if (cobj.nextSibling.nodeName != 'SPAN'){ 
gspan(cobj.nextSibling); 
} else { 
return cobj.nextSibling;
}
} 
//檢查表單 obj【表單對象】， info【提示信息】 fun【處理函數(shù)】 click 【是否需要單擊， 提交時候需要觸發(fā)】 
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; //頁面載入完執(zhí)行
function regs(click){
var stat = true; //返回狀態(tài)， 提交數(shù)據(jù)時用到
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, "確定密碼要和上面一致，規(guī)則也要相同", function(val){
if (val.match(/^\S+$/) && val.length >= && val.length <= && val == password.value){
return true;
} else {
stat = false;
return false;
}
}, click);
check(email, "請按郵箱規(guī)則輸入", function(val){
if (val.match(/\w+@\w+\.\w/)){
return true;
} else {
stat = false;
return false;
}
}, click);
return stat;
}

您可能感興趣的文章: