实验：验证用户信息的合法性

最新推荐文章于 2021-06-03 17:55:56 发布

欧麦噶没有昵称

最新推荐文章于 2021-06-03 17:55:56 发布

阅读量835

点赞数 1

文章标签： html css js

本文链接：https://blog.csdn.net/iostream992/article/details/83308523

版权

本文详细介绍了一个用户注册页面的设计，包括HTML结构、CSS样式和JavaScript表单验证。页面使用了复杂的布局，如浮动元素、背景图片和响应式设计。JavaScript部分实现了全面的表单验证，确保用户名、密码和E-mail的合法性。

摘要由CSDN通过智能技术生成

声明：该代码还在更新中如有错误请见谅....

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册页面</title>
    <style>
		#main ul{
			list-style:none;
			background-image:url(../111.jpg);
			padding-top: 0;
		}
		#main li{
			padding:5px;
		}
		body{
			background-image:url(../111.jpg);
			margin:0px;   /*设置外边距*/
			padding:0px;     /*设置内边距*/
			font-size:9pt;   /*设置字体大小*/
		}
		header{
			background-image: url(../111.gif);/*设置背景*/
			height:168px;
		}
		section{
		    margin:0 auto auto auto;        /*设置外边距*/
			width:694px;
			clear: both;                   /*两侧均不可以有浮动内容*/
			background-color: #ffffff;
			border:1px solid #407d2a;    /*设置显示1像素的外边框*/
			height:545px;
		}
		aside{
			width:170px;                    
			float:left;                     /*浮动在左侧*/
			border-right:1px solid #407d2a; /*设置右侧显边框*/
			padding-right: 5px;
		}
		#left{
			float:right;     /*浮动在左侧*/
		}
		#right{
			float:right;     /*浮动在右侧*/
		}
		#main{
			float:left;       /*浮动在左侧*/
		}
	</style>
	
    <script language="javascript">
		
		/*检验全部表单元素是否为空*/
		function checkBlank(Form){
			var v=ture;
			for(i=0;i<Form.length;i++){
				if(Form.elements[i].value==" "){
					alter(Form.elements[i].title+"不能为空！");
					Form.elements[i].focus();
					v=false;
					return false;
				}
			}
		    return v;
		}
		/*验证用户名是否合法*/
		function checkuesrname(username){
			var str=username;
			var Expression=/^(\w){3,20}$/;
			var objExp=new RegExp(Expression);
			return objExp.test(str);   /*通过正则表达式验证*/
		}
		/*验证密码是否合法*/
		function checkPWD(PWD){
			var str=PWD;
			var Expression=/^[A-za-z]{1}([A-Za-Z0-9]|[._]){5,19}$/;
			var objExp=new RegExp(Expression);
			return objExp.test(str);
		}
		/*验证E-mail是否合法*/
		function checkmail(email){
			var str=email;
			var Expression=/\w+([-+.']\w+)*@\w+([-.])\w+)*\.\w+([-.]\w+)*/;
			var objExp=new RegExp(Expression);
			return objExp.test(str);
		}
		
		    function check(Form){
				if(checkBlank(Form)){
				   if(checkusername(Form.username.value)){       /*验证用户名*/
					  if(checkPWD(Form.pwd.value)){             /*验证密码*/
						  if(Form.pwd.value==Form.repwd.value){ /*验证两次密码输入*/
							  if(checkmail(Form.email.value)){  /*验证邮箱*/
								return ture;
							}else{
								alert("请输入正确E-mail地址！");
								Form.email.focus();
								return false;
							}
						}else{
							alert("两次密码输入不一致，请重新输入！");
							return false;
						}
					}else{
						alert("您的密码输入不合法！");
						Form.pwd.focus();
						return false;
					}
				}else{
					alert("您输入的用户名不合法！");
					Form.username.focus();
					return false;
				}
			}else
				return false;
	
		}
	</script>
</head>

<body>
	<section style="background-image: url(../112.gif)">
	    <header></header>
		<div id="left"><img src="../112.png" width="0" height="0"></div>
		<aside style="background-image: url(../111.jpg)"> <img src="../111.jpg" width="44" height="54">
			<b>注册帮助</b>
		    <ul style="background-image: url(../112.png)" >
			    <li>
					会员名：为会员登录网站的通行证，长度控制在3-20个字符之内。<br><br>
				</li>
				<li>
				密码：请设置在6-20位之间。<br><br>
				</li>
				<li>
				确定密码：确定密码必须与密码一致。<br><br>
				</li>
				<li>
				Email：请输入有效的Email地址，以便于与您联系。
				</li>
			</ul>
		</aside>
		<div id="main">
		    <form name="form1" method="post" action="" onSubmit="return check(this)">
				<ul>
				    <li>
						用&nbsp;户&nbsp;名
						<input type="text" name="username" id="username" 
							   placeholder="长度控制3-20字符之间" autofocus size="23" title="用户名">
					</li>
					<li>
						密&nbsp;&nbsp;&nbsp;&nbsp;码
						<input name="pwd" type="password" id="pwd" 
						placeholder="请设定在6-20位之间" size="23" title="密码">
					</li>
					<br>
					<li>
					    确认密码：
						<input type="password" name="repwd" id="repwd" size="23" title="确认密码" >
					</li>
					<li>
						性&nbsp;&nbsp;&nbsp;&nbsp;别
						<input type="radio" name="sex"  id="sex_0" form="form1" value="男" checked >
						男
						<input type="radio" name="sex" value="女" id="sex_1">
						女
					</li>
					<li>
						E-mail:
						<input type="email" name="email" id="email" size="40" title="E-mail 地址">
					</li>
					<li>
						<input type="submit" name="submit" id="submit" value="提交">
						<input type="reset" name="reset" id="reset" value="重置">
					</li>
				</ul>
			</form>
		</div>
		<div id="right"> <img src="../111.jpg" width="44" height="89"></div>
	</section>
</body>
</html>