JS实现注册数据验证

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		<form action="index.html" name="myfrm" method="get" onsubmit="return flagSubmit();">    名:
			<input name="uname" onfocus="tips('nameMsg','用户名不能为空');"/><span id="nameMsg">必填(仅登录时使用)span><br /><br />       码:
			<input type="password" name="upwd" onfocus="tips('pwdMsg','密码长度不低于6位');"/><span id="pwdMsg">必填span><br /><br />
			确认密码:
			<input type="password" name="confPwd" onfocus="tips('cpwdMsg','需要和密码保持一致');"/><span id="cpwdMsg">必填(与密码相同)span><br /><br />
			显示昵称:
			<input name="showName" onfocus="tips('showNameMsg','昵称不能为空');"/><span id="showNameMsg">必填(昵称)span><br /><br />       箱:
			<input name="email" onfocus="tips('emailMsg','请输入正确格式的邮箱');"/><span id="emailMsg">必填(需要用邮箱激活账户)span><br /><br />
			<input type="submit" value="注册"/>
		form>
		<script type="text/javascript">
			function tips(spid,msg){
				document.getElementById(spid).innerHTML=""+msg+"";
			}
			function valiName(){
				var name = document.myfrm.uname.value;
				var flag=true;
				if(name==""){
					document.getElementById("nameMsg").innerHTML="*用户名不能为空";
					flag=false;
				}
				var ret=/\w{6,}/;
				if(!ret.test(name)){
					document.getElementById("nameMsg").innerHTML="*用户名只能由字母/数字/下划线组成";
					flag=false;
				}
				if(flag){
					document.getElementById("nameMsg").innerHTML="";
				}
				return flag;
			}
			function valiPwd(){
				var pwd = document.myfrm.upwd.value;
				var flag=true;
				if(pwd==""){
					document.getElementById("pwdMsg").innerHTML="*密码不能为空";
					flag=false;
				}
				var ret=/[a-zA-Z0-9]{8,}/;
				if(!ret.test(pwd)){
					document.getElementById("pwdMsg").innerHTML="*密码只能由字母/数字组成且不低于8位";
					flag=false;
				}
				if(flag){
					document.getElementById("pwdMsg").innerHTML="";
				}
				return flag;
			}
			function valiConfPwd(){
				var confPwd = document.myfrm.confPwd.value;
				var pwd = document.myfrm.upwd.value;
				var flag=true;
				if(confPwd!=pwd){
					document.getElementById("cpwdMsg").innerHTML="*两次密码输入不一致";
					flag=false;
				}
				if(flag){
					document.getElementById("cpwdMsg").innerHTML="";
				}
				return flag;
			}
			function valiShowName(){
				var sname = document.myfrm.showName.value;
				var flag=true;
				if(sname==""){
					document.getElementById("showNameMsg").innerHTML="*昵称不能为空";
					flag=false;
				}
				if(flag){
					document.getElementById("showNameMsg").innerHTML="";
				}
				return flag;
			}
			function valiEmail(){
				var email = document.myfrm.email.value;
				var flag=true;
				if(email==""){
					document.getElementById("emailMsg").innerHTML="*邮箱不能为空";
					flag=false;
				}
				var ret=new RegExp("^[a-z0-9]{6,}@[a-z0-9]{2,}\.((com)|(cn)){1}$");
				if(!ret.test(email)){
					document.getElementById("emailMsg").innerHTML="*邮箱格式不正确";
					flag=false;
				}
				if(flag){
					document.getElementById("emailMsg").innerHTML="";
				}
				return flag;
			}
			//绑定事件
			document.myfrm.uname.onblur=valiName;
			document.myfrm.upwd.onblur=valiPwd;
			document.myfrm.confPwd.onblur=valiConfPwd;
			document.myfrm.showName.onblur=valiShowName;
			document.myfrm.email.onblur=valiEmail;
			
			document.myfrm.uname.focus();
			function flagSubmit(){
				var flag1=valiName();
				var flag2=valiPwd();
				var flag3=valiConfPwd();
				var flag4=valiShowName();
				var flag5=valiEmail();
				if(flag1 && flag2 && flag3 && flag4 && flag5){
					return true;
				}
				//验证未通过,不能提交表单
				return false;
			}
		script>
	body>
html>

你可能感兴趣的:(HTML+JS+Jquery,html,javascript,html5)