原生js實現表單驗證(提交後驗證)

在平常的頁面當中,我們經常用到表單和表單驗證,表單驗證是數據進入數據庫前一次在客戶機利用腳本檢查數據類型的行爲。作爲一個初學者,在這裏貼下我的菜鳥代碼。希望對和我一樣的菜鳥有所幫助,也希望大神多多指點。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>index</title>
		<meta name="author" content="Administrator" />
		<!-- Date: 2014-08-29 -->
		<script type="text/javascript">
			function check(obj){//傳進來的是form表單對象
	//獲取提示框的id
	var worming=document.getElementById("worming");
	//聲明對象下面的三個input對象
	var name=obj.name;
	var password=obj.password;
	var rePassword=obj.rePassword;
	//調用檢查name方法,傳進來的是name輸入框對象
	if(!checkName(name)){
		worming.innerHTML=name.getAttribute("warm");
		return false;
	}else{
		//檢查密碼
		if(!checkPassword(password)){
			worming.innerHTML=password.getAttribute("warm");
			return false;
		}else{
			//再次檢查密碼
			if(!checkRePassword(rePassword,password)){
				//alert("repassword no");
				worming.innerHTML=rePassword.getAttribute("warm");
				return false;
			}else{
				return true;
			}
		}
	}
}
//檢查name
function checkName(name){
	if(name.value==""||name.value=="null"){
		return false;
	}else{
		return true;
	}
}
//第一次檢查密碼
function checkPassword(password){
	var pattner="^[a-zA-Z][a-zA-Z0-9_@]{5,20}$";
	var a=new RegExp(pattner);
	if(password==""||password==null){
		return false;
	}else{
		if(!a.test(password.value)){
			return false;
		}else{
			return true;
		}
	}
}
//第二次檢查密碼
function checkRePassword(rePassword,password){
	var pattner="^[a-zA-Z][a-zA-Z0-9_@]{5,20}$";
	var a=new RegExp(pattner);
	if(rePassword.value==""||rePassword.value==null){
		return false;
	}else{
		if(!a.test(rePassword.value)){
			return false;
		}else{
			if(rePassword.value!==password.value){
				return false;
			}else{
				return true;
			}
		}
	}
}
		</script>
	</head>
	<body>
		<form οnsubmit="return check(this)">
			<input type="text" name="name" warm="<font color=red>*</font>UnserName unNull."/>
			<input type="password" name="password" warm="<font color=red>*</font>must be right." />
			<input type="password" name="rePassword" warm="<font color=red>*</font>must be right,again." />
			<input type="submit" />
		</form>
		<span id="worming">123</span>
	</body>
</html>

源代碼免費下載地址:http://download.csdn.net/detail/u014703834/7836833

發佈了35 篇原創文章 · 獲贊 7 · 訪問量 7萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章