JS注册弹框效果

最新推荐文章于 2021-12-20 19:04:44 发布

原创最新推荐文章于 2021-12-20 19:04:44 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍了一个简单的会员注册表单的设计与实现过程，包括使用HTML、CSS和JavaScript完成表单布局、样式美化及输入验证等功能。文章详细展示了如何通过前端技术确保用户正确填写表单信息，并提供了完整的代码示例。

效果图

CSS部分


			*{
				margin: 0px;
				padding: 0px;
			}
			.close{
				float: right;
				background-color: black;
				color: white;
				font-weight: bold;
				padding: 0px 5px;
			}
			body{
				background-color: yellow;
			}
			#outer{
				width: 400px;
				height: 300px;
				margin: 100px auto;
				border: solid;
				display: none;
			}
			.header{
				width: 100%;
				background-color: #40C750;
				font:20px/1.5em "微软雅黑";
				color:white;
			}
			ul{
				width: 400px;
				height: 270px;
				list-style: none;
				padding-left: 20px;
				margin-top: 20px;
			}
			li{
				margin-bottom: 10px;
			}
			li>span:first-child{
				display: inline-block;
				width: 80px;
				text-align: right;
				margin-right: 10px;
			}
			[type='submit']{
				background-color: #5AC031;
				color: white;
				line-height: 30px;
				width: 100px;
				text-indent: 10px;
				margin-left: 120px;
			}

HTML部分

		<div id="outer">
			<div class="header">会员注册<span class="close">X</span></div>
			<ul>
				<li>
					<span class="type">用户名：</span><input type="text" />
				</li>
				<li>
					<span class="type">密码：</span><input type="password" />
				</li>
				<li>
					<span class="type">确认密码：</span><input type="password" />
				</li>
				<li>
					<span>性别：</span>
					<input type="radio" class="same" checked="true"/><span>保密</span>
					<input type="radio" class="same"/><span>男</span>
					<input type="radio" class="same"/><span>女</span>
				</li>
				<li>
					<span>出生日期：</span>
					<select name="year">
						<option value="year_1">1980</option>
						<option value="year_2">1981</option>
						<option value="year_2">1982</option>
						<option value="year_3">1983</option>
						<option value="year_4">1984</option>
					</select>
					<span>年</span>
					<select name="month">
						<option value="month_1">1</option>
						<option value="month_2">2</option>
						<option value="month_2">3</option>
						<option value="month_3">4</option>
						<option value="month_4">5</option>
					</select>
					<span>月</span>
					<select name="date">
						<option value="date_1">1</option>
						<option value="date_2">2</option>
						<option value="date_2">3</option>
						<option value="date_3">4</option>
						<option value="date_4">5</option>
					</select>
					<span>日</span>
				</li>
				<li>
					<input type="submit" value="准许提交！" class="go"/>
				</li>
			</ul>
		</div>

JS部分

			window.onload=function(){
				setTimeout(function(){document.getElementById('outer').style.display='block';},1000);
				var inputs=document.getElementsByTagName('input');
				var radios=document.getElementsByClassName('same');
				var types=document.getElementsByClassName('type');
				var clo=document.getElementsByClassName('close')[0];
				clo.onclick=function(){
					document.getElementById('outer').style.display='none';
				}
				for(var i=0;i<radios.length;i++){
					radios[i].onclick=function(){
						for(var j=0;j<radios.length;j++){
							radios[j].checked=false;
						}
						this.checked=true;
					}
				}
				var submits=document.getElementsByClassName('go')[0];
				submits.onclick=function(){
					if(inputs[0].value==''||inputs[1].value==''||inputs[2].value==''){
						for(var i=0;i<3;i++){
							if(inputs[i].value==''){
								alert("请输入"+types[i].innerHTML);
								break;//一旦有没有填的就弹一个框。
							}
						}
					}
					else if(inputs[1].value!=inputs[2].value){
								alert("前后密码输入不一致");
							}
					else{
					document.getElementById('outer').style.display='none';
					alert("提交成功");
					
					}
				}
				
			}