javascript制作的簡單注冊模塊表單驗(yàn)證
更新時(shí)間：2015年04月13日 10:53:22 投稿：hebedich
通常在我們的HTML頁面表單中有大量的數(shù)據(jù)驗(yàn)證工作， 免不了要寫很多驗(yàn)證表單的js代碼，這是一項(xiàng)非常繁瑣枯燥的工作。很多程序員也會(huì)經(jīng)常遺漏這項(xiàng)工作。所以寫了這一 段JavaScript代碼提供給大家使用。使用起來很簡單，大家拿回去自由擴(kuò)展吧
一個(gè)注冊框 進(jìn)行表單驗(yàn)證處理
如圖
有簡單的驗(yàn)證提示功能
代碼思路也比較簡單
輸入框失去焦點(diǎn)時(shí)便檢測，并進(jìn)行處理
表單具有 onsubmit = "return check()"行為，處理驗(yàn)證情況
點(diǎn)擊提交表單按鈕時(shí)，進(jìn)行最終的驗(yàn)證，達(dá)到是否通過表單提交的請求。
先是最基本的html+css部分
<style type="text/css">
body{margin:0;padding: 0;}
.login{position:relative;margin:100px auto;padding:50px 20px;width: 350px;height: 200px;border:1px solid #333;}
.login legend{font-weight: bold;color: green;text-align: center;}
.login label{display:inline-block;width:130px;text-align: right;}
.btn{height: 30px;width:100px;padding: 5px;border:0;background-color: #00dddd;font-weight: bold;cursor: pointer;float: right;}
input{height: 20px;width: 170px;}
.borderRed{border: 2px solid red;}
img{display: none;}
</style>
</head>
<body>
<div class="login">
<form name="form" method="post" action="register.php" onsubmit="return check()">
<legend>【Register】</legend>
<p><label for="name">UserName: </label>
<input type="text" id="name" >
<img src="./img/gou.png" width="20px" height="20px"></p>
<p><label for="password">Password: </label>
<input type="password" id="password" >
<img src="./img/gantan.png" width="20px" height="20px"></p>
<p><label for="R_password">Password Again: </label>
<input type="password" id="R_password" >
<img src="./img/gou.png" width="20px" height="20px"></p>
<p><label for="email">Email: </label>
<input type="text" id="email" >
<img src="./img/gou.png" width="20px" height="20px"></p>
<p><input type="submit" value="Register" class="btn"></p>
</form>
</div>
然后是js的class相關(guān)處理函數(shù)
function hasClass(obj,cls){ // 判斷obj是否有此class
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(obj,cls){ //給 obj添加class
if(!this.hasClass(obj,cls)){
obj.className += " "+cls;
}
}
function removeClass(obj,cls){ //移除obj對應(yīng)的class
if(hasClass(obj,cls)){
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg," ");
}
}
然后是驗(yàn)證各個(gè)輸入框的值
function checkName(name){ //驗(yàn)證name
if(name != ""){ //不為空則正確，當(dāng)然也可以ajax異步獲取服務(wù)器判斷用戶名不重復(fù)則正確
removeClass(ele.name,"borderRed"); //移除class
document.images[0].setAttribute("src","./img/gou.png"); //對應(yīng)圖標(biāo)
document.images[0].style.display = "inline"; //顯示
return true;
}else{ //name不符合
addClass(ele.name,"borderRed"); //添加class
document.images[0].setAttribute("src","./img/gantan.png"); //對應(yīng)圖標(biāo)
document.images[0].style.display = "inline"; //顯示
return false;
}
}
function checkPassw(passw1,passw2){ //驗(yàn)證密碼
if(passw1 == "" || passw2 == "" || passw1 !== passw2){ //兩次密碼輸入不為空且不等 不符合
addClass(ele.password,"borderRed");
addClass(ele.R_password,"borderRed");
document.images[1].setAttribute("src","./img/gantan.png");
document.images[1].style.display = "inline";
document.images[2].setAttribute("src","./img/gantan.png");
document.images[2].style.display = "inline";
return false;
}else{ //密碼輸入正確
removeClass(ele.password,"borderRed");
removeClass(ele.R_password,"borderRed");
document.images[1].setAttribute("src","./img/gou.png");
document.images[1].style.display = "inline";
document.images[2].setAttribute("src","./img/gou.png");
document.images[2].style.display = "inline";
return true;
}
}
function checkEmail(email){ //驗(yàn)證郵箱
var pattern = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
if(!pattern.test(email)){ //email格式不正確
addClass(ele.email,"borderRed");
document.images[3].setAttribute("src","./img/gantan.png");
document.images[3].style.display = "inline";
ele.email.select();
return false;
}else{ //格式正確
removeClass(ele.email,"borderRed");
document.images[3].setAttribute("src","./img/gou.png");
document.images[3].style.display = "inline";
return true;
}
}
然后為各個(gè)輸入框添加監(jiān)聽事件：
var ele = { //存放各個(gè)input字段obj
name: document.getElementById("name"),
password: document.getElementById("password"),
R_password: document.getElementById("R_password"),
email: document.getElementById("email")
};
ele.name.onblur = function(){ //name失去焦點(diǎn)則檢測
checkName(ele.name.value);
}
ele.password.onblur = function(){ //password失去焦點(diǎn)則檢測
checkPassw(ele.password.value,ele.R_password.value);
}
ele.R_password.onblur = function(){ //R_password失去焦點(diǎn)則檢測
checkPassw(ele.password.value,ele.R_password.value);
}
ele.email.onblur = function(){ //email失去焦點(diǎn)則檢測
checkEmail(ele.email.value);
}
最后就是點(diǎn)擊提交注冊時(shí)調(diào)用的check()函數(shù)了
function check(){ //表單提交則驗(yàn)證開始
var ok = false;
var nameOk = false;
var emailOk = false;
var passwOk = false;
if(checkName(ele.name.value)){ nameOk = true; } //驗(yàn)證name
if(checkPassw(ele.password.value,ele.R_password.value)){ passwOk = true; } //驗(yàn)證password
if(checkEmail(ele.email.value)){ emailOk = true; } //驗(yàn)證email
if(nameOk && passwOk && emailOk){
alert("Tip: Register Success .."); //注冊成功
//return true;
}
return false; //有誤，注冊失敗
}
完整代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Register</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
body{margin:0;padding: 0;}
.login{position:relative;margin:100px auto;padding:50px 20px;width: 350px;height: 200px;border:1px solid #333;}
.login legend{font-weight: bold;color: green;text-align: center;}
.login label{display:inline-block;width:130px;text-align: right;}
.btn{height: 30px;width:100px;padding: 5px;border:0;background-color: #00dddd;font-weight: bold;cursor: pointer;float: right;}
input{height: 20px;width: 170px;}
.borderRed{border: 2px solid red;}
img{display: none;}
</style>
</head>
<body>
<div class="login">
<form name="form" method="post" action="register.php" onsubmit="return check()">
<legend>【Register】</legend>
<p><label for="name">UserName: </label>
<input type="text" id="name" >
<img src="./img/gou.png" width="20px" height="20px"></p>
<p><label for="password">Password: </label>
<input type="password" id="password" >
<img src="./img/gantan.png" width="20px" height="20px"></p>
<p><label for="R_password">Password Again: </label>
<input type="password" id="R_password" >
<img src="./img/gou.png" width="20px" height="20px"></p>
<p><label for="email">Email: </label>
<input type="text" id="email" >
<img src="./img/gou.png" width="20px" height="20px"></p>
<p><input type="submit" value="Register" class="btn"></p>
</form>
</div>
<script type="text/javascript">
function hasClass(obj,cls){ // 判斷obj是否有此class
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(obj,cls){ //給 obj添加class
if(!this.hasClass(obj,cls)){
obj.className += " "+cls;
}
}
function removeClass(obj,cls){ //移除obj對應(yīng)的class
if(hasClass(obj,cls)){
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg," ");
}
}
function checkName(name){ //驗(yàn)證name
if(name != ""){ //不為空則正確，當(dāng)然也可以ajax異步獲取服務(wù)器判斷用戶名不重復(fù)則正確
removeClass(ele.name,"borderRed"); //移除class
document.images[0].setAttribute("src","./img/gou.png"); //對應(yīng)圖標(biāo)
document.images[0].style.display = "inline"; //顯示
return true;
}else{ //name不符合
addClass(ele.name,"borderRed"); //添加class
document.images[0].setAttribute("src","./img/gantan.png"); //對應(yīng)圖標(biāo)
document.images[0].style.display = "inline"; //顯示
return false;
}
}
function checkPassw(passw1,passw2){ //驗(yàn)證密碼
if(passw1 == "" || passw2 == "" || passw1 !== passw2){ //兩次密碼輸入不為空且不等 不符合
addClass(ele.password,"borderRed");
addClass(ele.R_password,"borderRed");
document.images[1].setAttribute("src","./img/gantan.png");
document.images[1].style.display = "inline";
document.images[2].setAttribute("src","./img/gantan.png");
document.images[2].style.display = "inline";
return false;
}else{ //密碼輸入正確
removeClass(ele.password,"borderRed");
removeClass(ele.R_password,"borderRed");
document.images[1].setAttribute("src","./img/gou.png");
document.images[1].style.display = "inline";
document.images[2].setAttribute("src","./img/gou.png");
document.images[2].style.display = "inline";
return true;
}
}
function checkEmail(email){ //驗(yàn)證郵箱
var pattern = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
if(!pattern.test(email)){ //email格式不正確
addClass(ele.email,"borderRed");
document.images[3].setAttribute("src","./img/gantan.png");
document.images[3].style.display = "inline";
ele.email.select();
return false;
}else{ //格式正確
removeClass(ele.email,"borderRed");
document.images[3].setAttribute("src","./img/gou.png");
document.images[3].style.display = "inline";
return true;
}
}
var ele = { //存放各個(gè)input字段obj
name: document.getElementById("name"),
password: document.getElementById("password"),
R_password: document.getElementById("R_password"),
email: document.getElementById("email")
};
ele.name.onblur = function(){ //name失去焦點(diǎn)則檢測
checkName(ele.name.value);
}
ele.password.onblur = function(){ //password失去焦點(diǎn)則檢測
checkPassw(ele.password.value,ele.R_password.value);
}
ele.R_password.onblur = function(){ //R_password失去焦點(diǎn)則檢測
checkPassw(ele.password.value,ele.R_password.value);
}
ele.email.onblur = function(){ //email失去焦點(diǎn)則檢測
checkEmail(ele.email.value);
}
function check(){ //表單提交則驗(yàn)證開始
var ok = false;
var nameOk = false;
var emailOk = false;
var passwOk = false;
if(checkName(ele.name.value)){ nameOk = true; } //驗(yàn)證name
if(checkPassw(ele.password.value,ele.R_password.value)){ passwOk = true; } //驗(yàn)證password
if(checkEmail(ele.email.value)){ emailOk = true; } //驗(yàn)證email
if(nameOk && passwOk && emailOk){
alert("Tip: Register Success .."); //注冊成功
//return true;
}
return false; //有誤，注冊失敗
}
</script>
</body>
</html>
以上所述就是本文的全部內(nèi)容了，希望能夠?qū)Υ蠹覍W(xué)習(xí)javascript表單驗(yàn)證有所幫助。
您可能感興趣的文章:
- jquery validate.js表單驗(yàn)證的基本用法入門
- js 常用正則表達(dá)式表單驗(yàn)證代碼
- JavaScript表單驗(yàn)證完美代碼
- JavaScript 表單驗(yàn)證正則表達(dá)式大全[推薦]
- AngularJS實(shí)現(xiàn)表單驗(yàn)證
- js正則表達(dá)式注冊頁面表單驗(yàn)證
- jquery表單驗(yàn)證插件（jquery.validate.js）的3種使用方式
- JavaScript表單驗(yàn)證實(shí)例之驗(yàn)證表單項(xiàng)是否為空
- AngularJS使用ngMessages進(jìn)行表單驗(yàn)證
- JavaScript實(shí)現(xiàn)簡單表單驗(yàn)證案例
相關(guān)文章
給應(yīng)用部分的js代碼設(shè)定一個(gè)統(tǒng)一的入口
javascript是種腳本語言，瀏覽器下載到哪兒就會(huì)執(zhí)行到哪兒，下面為大家介紹下，如何給應(yīng)用部分的js代碼一個(gè)統(tǒng)一的入口2014-06-06
JavaScript頁面倒計(jì)時(shí)功能完整示例
這篇文章主要介紹了JavaScript頁面倒計(jì)時(shí)功能,結(jié)合完整實(shí)例形式分析了javascript計(jì)時(shí)器、時(shí)間運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
五步輕松實(shí)現(xiàn)JavaScript HTML時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了五步輕松實(shí)現(xiàn)JavaScript HTML時(shí)鐘效果的代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
JS實(shí)現(xiàn)網(wǎng)頁端猜數(shù)字小游戲
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)網(wǎng)頁端猜數(shù)字小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
點(diǎn)擊A元素觸發(fā)B元素的事件在IE8下會(huì)識(shí)別成A元素
IE8自動(dòng)觸發(fā)的事件源會(huì)識(shí)別成手動(dòng)點(diǎn)擊的元素就是點(diǎn)擊A元素觸發(fā)B元素的事件在IE8下會(huì)識(shí)別成A元素,需要的朋友可以參考下2014-09-09
SeaJS是一個(gè)遵循CommonJS規(guī)范的JavaScript模塊加載框架。本文給大家分享sea.js知識(shí)總結(jié)，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
BootstrapTable+KnockoutJS相結(jié)合實(shí)現(xiàn)增刪改查解決方案（三）兩個(gè)Viewmodel搞定增刪改查
這篇文章主要介紹了BootstrapTable+KnockoutJS相結(jié)合實(shí)現(xiàn)增刪改查解決方案（三）兩個(gè)Viewmodel搞定增刪改查 的相關(guān)資料,需要的朋友可以參考下2016-08-08
script不刷新頁面的聯(lián)動(dòng)前后代碼
如何實(shí)現(xiàn)script不刷新頁面的聯(lián)動(dòng)，在本文有個(gè)不錯(cuò)的示例或許對大家有所幫助2013-09-09
這篇文章主要介紹了JavaScript每天定時(shí)更換皮膚樣式的方法,涉及javascript針對時(shí)間及css樣式的相關(guān)操作技巧,需要的朋友可以參考下2015-07-07
提交表單時(shí)執(zhí)行func方法實(shí)現(xiàn)代碼
客戶端的js驗(yàn)證想必大家早已熟悉，今天本文帶著大家再回憶一下，主要是在提交表單之前執(zhí)行func方法，感興趣的你可以參考下哈，希望可以幫助到你2013-03-03