/*得到最近的SPAN標籤*/
function getspan(cobj){
while(true){
if(cobj.nextSibling.nodeName!="SPAN")
cobj=cobj.nextSibling;
else
return cobj.nextSibling;
}
}
/*
通用的檢測函數
obj：檢測的對象
error：檢查出錯的信息
fun：回調函數，檢測輸入的值是否符合規則
click：狀態，判斷是點擊提交按鈕 還是失去焦點
*/
function check(obj,error,fun,click){
var sp=getspan(obj);
obj.onfocus=function(){
sp.innerHTML=error;
sp.className="stat2";
}
obj.onblur=function(){
if(fun(this.value)){
sp.innerHTML="OK!";
sp.className="stat4";
}else{
sp.innerHTML=error;
sp.className="stat3";
}
}
if(click=="click")
obj.onblur();
}
/*加載頁面調用*/
function regs(click){
var stat=true;
var username=document.getElementsByName("username")[0];
var password=document.getElementsByName("password")[0];
var repass=document.getElementsByName("repass")[0];
var email=document.getElementsByName("email")[0];
check(username,"用戶名長度必須在6-15位之間",function(val){
if(val.match(/^\S+$/) && val.length>=6 && val.length<=15){
return true;
}else{
stat=false;
return false;
}
},click);
check(password,"密碼長度必須在6-10位之間",function(val){
if(val.match(/^\S+$/) && val.length>=6 && val.length<=10){
return true;
}else{
stat=false;
return false;
}
},click);
check(repass,"必須和上面的相同，並且規則也一樣",function(val){
if(val.match(/^\S+$/) && val.length>=6 && val.length<=10 && 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;
}
function getspan(cobj){
while(true){
if(cobj.nextSibling.nodeName!="SPAN")
cobj=cobj.nextSibling;
else
return cobj.nextSibling;
}
}
/*
通用的檢測函數
obj：檢測的對象
error：檢查出錯的信息
fun：回調函數，檢測輸入的值是否符合規則
click：狀態，判斷是點擊提交按鈕 還是失去焦點
*/
function check(obj,error,fun,click){
var sp=getspan(obj);
obj.onfocus=function(){
sp.innerHTML=error;
sp.className="stat2";
}
obj.onblur=function(){
if(fun(this.value)){
sp.innerHTML="OK!";
sp.className="stat4";
}else{
sp.innerHTML=error;
sp.className="stat3";
}
}
if(click=="click")
obj.onblur();
}
/*加載頁面調用*/
function regs(click){
var stat=true;
var username=document.getElementsByName("username")[0];
var password=document.getElementsByName("password")[0];
var repass=document.getElementsByName("repass")[0];
var email=document.getElementsByName("email")[0];
check(username,"用戶名長度必須在6-15位之間",function(val){
if(val.match(/^\S+$/) && val.length>=6 && val.length<=15){
return true;
}else{
stat=false;
return false;
}
},click);
check(password,"密碼長度必須在6-10位之間",function(val){
if(val.match(/^\S+$/) && val.length>=6 && val.length<=10){
return true;
}else{
stat=false;
return false;
}
},click);
check(repass,"必須和上面的相同，並且規則也一樣",function(val){
if(val.match(/^\S+$/) && val.length>=6 && val.length<=10 && 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;
}
<html>
<head>
<script src="check.js"></script>
<style>
.stat1{
color:#aaa;
}
.stat2{
color:#000;
}
.stat3{
color:red;
}
.stat4{
color:green;
}
</style>
</head>
<body>
<form action="reg.php" method="post" onsubmit="return regs('click');">
username:<input type="text" name="username" value="">
<span class="stat1"></span><br>
password:<input type="text" name="password" value="">
<span class="stat1"></span><br>
repass:<input type="text" name="repass" value="">
<span class="stat1"></span><br>
email:<input type="text" name="email" value="">
<span class="stat1"></span><br>
submit:<input type="submit" name="sub" value="submit">
</form>
</body>
</html>
<head>
<script src="check.js"></script>
<style>
.stat1{
color:#aaa;
}
.stat2{
color:#000;
}
.stat3{
color:red;
}
.stat4{
color:green;
}
</style>
</head>
<body>
<form action="reg.php" method="post" onsubmit="return regs('click');">
username:<input type="text" name="username" value="">
<span class="stat1"></span><br>
password:<input type="text" name="password" value="">
<span class="stat1"></span><br>
repass:<input type="text" name="repass" value="">
<span class="stat1"></span><br>
email:<input type="text" name="email" value="">
<span class="stat1"></span><br>
submit:<input type="submit" name="sub" value="submit">
</form>
</body>
</html>