js 注册页面案例

最新推荐文章于 2022-09-06 20:49:23 发布
最新推荐文章于 2022-09-06 20:49:23 发布
阅读量554 收藏 5
点赞数
分类专栏： javaScript 文章标签： javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43294560/article/details/102945691
版权

校验
正则
封装
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>
神奇大叔
关注
专栏目录
JS实践--使用Js完成一个注册页面
这个名字没什么特点的博客
01-22 2552
JS实践使用JS实现一个注册页面 使用JS实现一个注册页面 知识点： * 正则表达式： * * 正则表达式是对于数据格式进行一定的规范限制 * * * ^：开始 * [0-9] [a-z A-Z] :数字 字母 * * {2,4} ：段域 至少是2位 最多是4位 * {3}:指定范围就是3位 * {2,}:至少是2位 * $:结束 * * \d：[0-9] *
用js写注册页面
m0_45931484的博客
07-14 1293
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <style> #register label { color: #FF0000; font-size: 12px; } </...
JS一个简单的注册页面实例
10-19
下面小编就为大家带来一篇JS一个简单的注册页面实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
注册页面的js验证
.net 技术专栏
03-28 1621
<br />程序效果地址：http://product.e-works.net.cn/CompanyRegister.aspx<br />js 代码如下：<br />// 回调返回的消息<br />var CALLBACK_MESSAGE_CAN = '可以' ;     // 正常的<br />var CALLBACK_MESSAGE_NOT = '不可以' ;        // 文件未找到<br /> //消除前后空格和多余的回车换行<br />function KindTrim(str)<br />
js注册界面
11-23
一个简单的注册界面验证，如果输入正确会返回输入的用户名和密码，如果没有填写会提示填写完整。
js-regist.rar_JS注册页面
09-22
总的来说，这个“js-regist.rar”压缩包提供了一个完整的JavaScript注册页面实现，包括了前端的用户界面交互和后端的数据通信。这种实现方式提高了用户体验，同时也简化了服务器与前端的交互流程。对于学习...
JavaScript 完成注册页面表单校验的实例
12-10
1、步骤分析 第一步：确定事件(onsubmit)并为其绑定一个函数 第二步：书写这个函数(获取用户输入的数据&...2、完成注册页面表单校验 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
javaScript常用案例
张张张张张高高的博客
09-06 9301
前端页面开发之javaScript常用案例
使用html+css+js网页设计一个登录注册案例.zip
06-13
本案例“使用html+css+js网页设计一个登录注册案例”将深入探讨如何结合这三种语言来创建一个功能完备的登录注册页面。 首先，HTML作为网页的基础结构语言，用于定义网页内容的组织和布局。在登录注册页面中，HTML...
JS用户注册案例
weixin_53286240的博客
09-03 194
JS 正则表达式，用户注册。原创加修改，勿cue
一个简单的web+JS的注册登录页面
10-02
这是一个简单的web登录注册页面，含有基础的JS登录验证语法，入门级页面源码文件，需要的，自行下载了解。
简单的登录注册页面 实现js验证
06-30
简单的登录注册页面 使用的是sqlserver2005 包含sql语句。
javascript注册页面代码
06-08
javascript注册页面代码（只包含用户名&密码&邮箱的验证）
注册页面demo
07-27
注册页面的demo
【JavaScript】案例1：使用JS完成注册页面校验
专注于Java领域开发 关注我 带你玩转Java
07-30 7533
使用JS完成注册页面校验
JS注册界面
m0_58823912的博客
06-10 137
HTML代码： <html> <head><title>注册</title></head> <style type="text/css"> .box1 { width:1920px; height:1080px; border: 2px solid blue; background-image:url("img/bg2.jpg") } .box2 { wid...
注册页面的js
programmer188的博客
03-26 320
var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;//手机号正则 var passwordReg = /^[\S]{6,12}$/ //密码必须6到12位，且不能出现空格 $('#reg').on('click', function () { var phone = $.trim($("#pho").val()); var us...
一个简单的注册页面,基于JS
QDY5945的博客
11-07 240
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head...
JavaScript综合 注册案例
gegejiawei的博客
06-11 390
项目目标效果图 表单验证 1、用户名：一般由数字，字母，下划线组成 2、手机号：一般是11位的阿拉伯数字 3、数据有效性验证的2个途径： (1) Html4时期，通过js脚本验证一些表单元素； (2) Html5中，有些表单控件自带一些验证属性 总结 H5验证是存在的，但是有时候自己的需求进行验证，所以正则表达式必须存在的！ 拓展知识点 elementList=document.querySelectorAll(selectors); 1、elementList是一个静态的NodeList类型的对象 2
HTML用户注册页面实现案例实验原理
最新发布
10-11
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、付费专栏及课程。

余额充值