js 注册页面案例

校验
正则
封装
span


<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			#showdiv{
				border:solid 2px orange;
				width:450px;
				border-radius:10px;
				margin:auto;
				margin-top:40px;
			}
			tr{
				height:40px;
			}
			table{
				margin:auto;
				color:white;
			}
			body{
				background-image:url(../css学习/img/钢铁侠4.jpg);
				background-repeat:no-repeat;
				background-size:1550px 730px;
			}
			input,textarea{
				color:blueviolet;
			}
			span{
				font-size:13px;
			}
			#codeSpan{
				font-size:20px;
			}
			
		</style>
		<script  type="text/javascript">
			//创建验证码
			function createCode()
			{
				var code=Math.floor(Math.random()*9000+1000);
				var span=document.getElementById("codeSpan");
				span.innerHTML=code;
				
			}
			//验证用户名
			function checkUname()
			{
				//获取用户名
				var uname=document.getElementById("uname").value;
				//创建校验规则
				var reg=/^[\u4e00-\u9fa5]{2,4}$/;
				//获取span对象
				var span=document.getElementById("unameSpan");
				//开始校验
				if(uname==""||uname==null)
				{
				//输出校验结果
					span.innerHTML="用户名不为空";
					span.style.color="red";
					return false;
				}else if(reg.test(uname)){
				//输出校验结果
					span.innerHTML="✔";
					span.style.color="green";
					return true;
				}else{
					span.innerHTML="用户名不符合规则";
					span.style.color="red";
					return false;
				}
			}
			//验证密码
			function checkPwd(){
				//获取用户的密码信息
				var pwd=document.getElementById("pwd").value;
				//创建校验规则
				var reg=/^[a-z0-9]+$/i;
				//获取span对象
				var span=document.getElementById("pwdSpan");
				//开始校验
				if(pwd==""||pwd==null)
				{//输出校验结果
					span.innerHTML="密码不能为空"
					span.style.color="red";
					return false;
				}else if(reg.test(pwd))
				{
					span.innerHTML="✔";
					span.style.color="green";
					return true;
				}else{
					span.innerHTML="密码不符合规则";
					span.style.color="red";
					return false;
				}
				checkPwd2();  //重输入密码时调用确认密码校验,
				
			}
			//验证确认密码
			function checkPwd2()
			{
				var pwd=document.getElementById("pwd").value;
				var pwd2=document.getElementById("pwd2").value;
				var span=document.getElementById("pwd2Span");
				if(pwd2==""||pwd==null)
				{
					span.innerHTML="确认密码不能为空";
					span.style.color="red";
					return false;
				}
				else if(pwd==pwd2)
				{
					span.innerHTML="✔";
					span.style.color="green";
					return true;
				}else{
					span.innerHTML="两次密码不相同";
					span.style.color="red";
					return false;
				}
			}
			//验证手机号
			function checkPhone(){
				return checkField("phone",/^\d{5,}$/);
				
			}
			//验证邮箱
			function checkEmail(){
				return checkField("mail",/^\d+@qq.com/);
			}
			//验证籍贯
			function checkAddress(){
				var address=document.getElementById("address").value;
				var span=document.getElementById("addressSpan");
				if(address=="a")
				{
					span.innerHTML="未选择籍贯";
					span.style.color="red";
					return false;
				}else{
					span.innerHTML="";
					return true;
				}
			}
			//验证爱好
			function checkFav()
			{
				var favs=document.getElementsByName("fav");
				var span=document.getElementById("favSpan");
				
				for(var i=0;i<favs.length;i++)
				{
					if(favs[i].checked)
					{
						span.innerHTML="";
						return true;
					}
				}
				
				span.innerHTML="爱好至少选择一项";
				span.style.color="red";
				return false;
			}
			//验证验证码
			function checkCode()
			{
				var code=document.getElementById("code").value;
				var span=document.getElementById("codeSpan");
				var span2=document.getElementById("codeSpan2");
				
				if(code==""||code==null)
				{
					span2.innerHTML="验证码为空";
					span2.style.color="red";
					return false;
				}else if(span.innerHTML==code)
				{
					span2.innerHTML="✔";
					span2.style.color="green";
					return true;
				}else{
					span2.innerHTML="验证码错误";
					span2.style.color="red";
					return false;
				}
			}
			//校验是否同意协议
			 	function checkAgree(){
					document.getElementById("sub").disabled=!document.getElementById("agree").checked;
			 	}
			//提交判断
				function checkSub(){
					checkUname();
					checkPwd();
					checkPwd2();
					checkPhone();
					checkEmail();
					checkFav();
					checkAddress();
					checkCode();
					return checkUname()&&checkPwd()&&checkPwd2()&&checkPhone()&&checkEmail()&&checkFav()&&checkAddress()&&checkCode();
				}

			 	
			/*----封装----*/
			function checkField(id,reg){
				//获取用户数据
				var inp=document.getElementById(id);
				va=inp.value;
				alt=inp.alt;
				//创建检验规则
				
				//获取span对象
				var span=document.getElementById(id+"Span");
				//开始校验
				if(va==""||va==null)
				{//输出校验结果
					span.innerHTML=alt+"不能为空"
					span.style.color="red";
					return false;
				}else if(reg.test(va)){
					span.innerHTML="✔";
					span.style.color="green";
					return true;
				}else{
					span.innerHTML=alt+"不符合规则";
					span.style.color="red";
					return false;
				}
				
				
			}
			
		</script>
	</head>
	<body onload="createCode()">
		<div id="showdiv">
			
		<form action="#" method="get" onsubmit="return checkSub()">
			<table>
				<tr>
					<td width="80px">用户名:</td>
					<td width="230px"><input type="text" name="uname" id="uname" alt="用户名" onblur="checkUname()"/><span id="unameSpan">*2-4位汉字</span>
					</td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="password" name="pwd" id="pwd" onblur="checkPwd()"/>
						<span id="pwdSpan">*数字和字母的组合</span>
					</td>
					
				</tr>
				<tr>
					<td>确认密码:</td>
					<td><input type="password" name="pwd2" id="pwd2" onblur="checkPwd2()"/>
						<span id="pwd2Span"></span>
					</td>
					
				</tr>
				<tr>
					<td>手机号:</td>
					<td><input type="text" name="phone" id="phone" alt="手机号" onblur="checkPhone()"/>
						<span id="phoneSpan"></span>
					</td>
					
				</tr>
				<tr>
					<td>邮箱:</td>
					<td><input type="text" name="mail" id="mail" alt="邮箱" onblur="checkEmail()"/>
						<span id="mailSpan"></span>
					</td>
					
				</tr>
				<tr>
					<td>性别:</td>
					<td><input type="radio" name="sex" value="0" id="sex" checked="checked"/><input type="radio" name="sex" value="1" id="sex"/>
					</td>
				</tr>
				<tr>
					<td>籍贯:</td>
					<td><select name="address" id="address" onchange="checkAddress()" ">
						<option value="美国">美国</option>
						<option value="a" selected="selected">--请选择--</option>
						<option value="英国">英国</option>
						<option value="法国">法国</option>
						<option value="不吉岛国">不吉岛国</option>
					</select>
					<span id="addressSpan"></span>
					</td>
				</tr>
				<tr>
					<td>爱好:</td>
					<td>
						<input type="checkbox" name="fav" id="" onclick="checkFav()"/>听歌
						<input type="checkbox" name="fav" id="" onclick="checkFav()"/>唱k
						<input type="checkbox" name="fav" id="" onclick="checkFav()"/>蹦迪<br />
						<input type="checkbox" name="fav" id="" onclick="checkFav()"/>看电影
						<input type="checkbox" name="fav" id="" onclick="checkFav()"/>打球
						<span id="favSpan"></span>
					</td>
				</tr>
				<tr>
					<td>个人爱好:</td>
					<td>
						<textarea name="intro" id="intro" cols="30" rows="5"></textarea>
					</td>
				</tr>
				<tr>
					<td>验证码:</td>
					<td><input type="text" name="code" id="code" style="width:100px;" onblur="checkCode()"/>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<span id="codeSpan" onclick="createCode()" style="background-image:url(../css学习/img/盾牌.jpg); cursor:pointer;color:yellow"></span>
						<span id="codeSpan2"></span>
						
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center"><input type="checkbox" name="" id="agree" onclick="checkAgree()" />是否同意本公司协议</td>
				</tr>
				<tr>
					<td colspan="2" align="center"> <input type="submit" disabled="disabled" value="立即注册" id="sub" style="cursor:pointer;"/></td>
				</tr>
				
			</table>
			
		</form>	
			
			
			
		</div>
		
		
	</body>
</html>
HTML用户注册页面的实现通常包含以下几个步骤和原理: 1. **基本结构**:首先创建一个HTML文件,结构上主要包括`<!DOCTYPE html>`声明、`<html>`标签、`<head>`部分用于定义元信息(如标题、CSS链接等),以及`<body>`部分用于显示页面内容。 ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>用户注册</title> <link rel="stylesheet" href="styles.css"> <!-- CSS样式表 --> </head> <body> <!-- 注册表单内容 --> </body> </html> ``` 2. **表单元素**:在`<body>`里添加用户注册所需的各种输入字段,如`<form>`标签用于包裹整个表单,`<input type="text">`用于姓名、邮箱、密码等文本输入,`<input type="email">`验证电子邮件格式,`<input type="password">`隐藏输入密码以保证安全,还有提交按钮`<button type="submit">注册</button>`。 ```html <form id="registerForm"> <label for="username">用户名:</label> <input type="text" id="username" name="username" required> <label for="email">邮箱:</label> <input type="email" id="email" name="email" required> <label for="password">密码:</label> <input type="password" id="password" name="password" required> <button type="submit">注册</button> </form> ``` 3. **事件处理**:通常会配合JavaScript来处理表单提交,验证输入数据的有效性和完整性,并防止跨站脚本攻击(XSS)。可以使用`addEventListener("submit", function(event) {...})`来监听表单提交事件。 4. **服务器交互**:当用户点击提交按钮后,表单数据会被发送到服务器端,比如PHP、Node.js、Python等后端语言处理。后端接收到数据后,进行进一步验证并存储到数据库中。 ```javascript document.getElementById('registerForm').addEventListener('submit', function(event) { event.preventDefault(); // 阻止默认提交行为 // 这里只是一个示例,实际需要与后端API交互 fetch('/api/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: document.getElementById('username').value, email: document.getElementById('email').value, password: document.getElementById('password').value }) }).then(response => response.json()) .then(data => { console.log(data); // 根据返回结果处理成功或失败的情况 }); }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值