原生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万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章