大数据(前期铺垫)————JQuery学习2.1 time: 2019.9.12

最新推荐文章于 2022-02-28 22:41:14 发布

汉卿HanQi_J.i

最新推荐文章于 2022-02-28 22:41:14 发布

阅读量276

点赞数

分类专栏：大数据学习

本文链接：https://blog.csdn.net/qq_40910782/article/details/100776386

版权

大数据学习专栏收录该内容

13 篇文章 2 订阅

订阅专栏

页面效果图:

在这里最难的地方就是当邮箱已经存在的时候下拉框的弹出，我这里简单说一下我的做法。----(数据和展示分离)

1.因为在做这个之前做过一个光标在输入框时会出现一个下拉框。所以我还是按照那种做法 ----把下拉框先做出来，但是和那个不同的是没有对应的属性值(可以参考当出现与规则不一样的情况下的span)所以我先做了三个空的div模块，每个div模块后有一个span

<!--在邮箱下面添加DIV模块   里面有三个元素-->
				<div id="emaildiv" style="display: none;">
					<div id="d1"><span id="s1"></span></div>
					<div id="d2"><span id="s2"></span></div>
					<div id="d3"><span id="s3"></span></div>
				</div>

2.当这里预留出来后，就是检测邮箱是否和已有的相同。如果相同后，则需要给这里的span赋值新的值(和错误提示相似)

//检查email是否正确
				$("#useremail").change(function(){
					//正则表达式
					 var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
		            if (!reg.test(useremail.val())) {
		                $("#span5").html("<font color='red'>邮箱输入有误</font>");
		                errormessage+="邮箱输入有误"
		                check=0;
		            }
		       		else{
						$("#span5").html("");
						check+=1;
						for(var j=0;j<email.length;j++){
							//判断输入的email和数组里的是否有相同的
							if(useremail.val()==email[j]){
								check-=1;
								//截取@之前的子串和@(包含)之后的子串
							    ch1=useremail.val().substring(0,useremail.val().indexOf('@'));
								ch2=useremail.val().substring(useremail.val().indexOf('@'),useremail.val().length);
								$("#span5").html("<font color='red'>邮箱已存在(请重新输入或选择为您提供的账号)</font>");
								//提供错误提示(所有出现的errormessage的都与提交有关可以不用考虑了)
								errormessage+="邮箱已存在";
								$("#emaildiv").show();
								//给下拉框赋值   这里就是和错误提示一样的做法，但是是在两个子串中间添加_num
								$("#s1").html("<font>"+ch1+"_1"+ch2+"</font><br/>");
								$("#s2").html("<font>"+ch1+"_2"+ch2+"</font><br/>");
								$("#s3").html("<font>"+ch1+"_3"+ch2+"</font><br/>");
								break;
							}
						}
					}
				});

3.这里只是让之前预留出来的下拉框可以显示对应的文字，因为在开始我们说过我们是通过数据和显示分离。上一步只是做了一个显示，在接下来我们需要实现数据的替换。在之前我们已经给div模块给了一个id，因为JQuery对象只能操作已存在或已经是JQuery的对象。因为便于理解我们选择前者

接下来就是给每个id设置对应的事件

$("#d1").click(function(){
					//给html赋值
					html+=ch1+"_1"+ch2;
					//修改email输入框的值
					$("#useremail").val(html);
					//下拉框隐藏
					$("#emaildiv").hide();
					//将错误提示取消
					$("#span5").html("");
					check+=1;
				});

我这里再解释一下这里是如何实现的。首先html是一个空的字符串。在这个空的字符串加上一个新的字符串就实现了一个字符串。随后只需要将val("elem")的elem替换成html即可实现输入框的替换。接下来所有的检测都实现了。

下面是源码。本界面实现了提交按钮，当检测信息不全部满足时会提示错误否则会输出你的账号信息

<!DOCTYPE html>
<html>
	<!--
    	作者：504546888@qq.com
    	时间：2019-09-12
    	描述：实现了一个注册页面   
    	利用JQuery进行账户长度判断，密码长度判断，二次密码验证，手机格式判断以及邮箱格式判断
    	当输入错误后会在对话框后提示对应的错误信息；
    	本功能难点为当输入的邮箱和数据库中已存在的相同时会提示一个下拉框显示类似的邮箱进行选择
    	本界面引入了一些简单的算法思想，所以看不懂也是很正常的
    -->
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://static.runoob.com/assets/jquery/jquery.growl/javascripts/jquery.growl.js" type="text/javascript"></script>
		<link href="https://static.runoob.com/assets/jquery/jquery.growl/stylesheets/jquery.growl.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript">
			
			
			$(function(){
				
				
				//获得输入的内容
				var username=$("#username");
				var userpwd=$("#userpwd");
				var surepwd=$("#surepwd");
				var userphone=$("#userphone");
				var useremail=$("#useremail");
				//设置邮箱数组
				var email=["123@qq.com","456@163.com"];
				//设置检查点，条件不符时检查点为0  当条件符合时检查点为1  只有当所有条件都符合时最后才为1
				var check=0;
				//设置提示信息
				var errormessage="";
				var ch1="";
				var ch2="";
				var html="";
				//提交按钮的点击事件
				$(".notice").click(function(event){
					event.preventDefault();
				    event.stopPropagation();
				    //设置一个空字符串  用来给输入框初始化
				    var emp="";
				    //将输入框的值给其他变量用来输出
				    var un=username.val();
				    var up=userpwd.val();
				    var uph=userphone.val();
				    var ue=useremail.val();
				    //给输入框初始化
				    username.val(emp);
				    userpwd.val(emp);
				    surepwd.val(emp)
				    userphone.val(emp);
				    useremail.val(emp);
				    //当所有的检查点都满足条件时  check=5
				    if(check==5){
				    	return $.growl.notice({
				      	title: "提交成功",
				      	//提示账号密码
				        message: "账户:"+un+"密码:"+up+"\n手机号:"+uph+"\n邮箱"+ue
      				});
				    }else{
				    	//否则为0
				    	return $.growl.error({
				      	title: "提交失败",
				      	//提示错误信息
				        message: errormessage
      				});
				    }
				    
				});
				//账号的判断  长度 6-8
				$("#username").change(function(){
					if(username.val().length<6||username.val().length>8){
						//给span添加错误提示
						$("#span1").html("<font color='red'>账号长度在6-8</font>");
						errormessage+="账号长度错误;"
						check-=1
					}else{
						//将错误提示取消
						$("#span1").html("");
						check+=1;
					}
				});
				//密码的判断  长度5-18
				$("#userpwd").change(function(){
					if(userpwd.val().length<5||userpwd.val().length>18){
						$("#span2").html("<font color='red'>密码长度在5-18</font>");
						errormessage+="密码长度错误;"
						check-=1
					}else{
						$("#span2").html("");
						check+=1;
					}
				});
				//判断二次密码是否正确
				$("#surepwd").change(function(){
					if(userpwd.val()!=surepwd.val()){
						$("#span3").html("<font color='red'>两次密码错误</font>");
						errormessage+="第二次密码输入有误;"
						check-=1
					}else{
						$("#span3").html("");
						check+=1;
					}
				});
				//检查手机号是否正确
				$("#userphone").change(function(){
					if(userphone.val().length!=11){
						$("#span4").html("<font color='red'>手机号输入有误</font>");
						errormessage+="手机号输入有误;"
						check-=1
					}else{
						$("#span4").html("");
						check+=1;
					}
				});
				//下拉框文字的点击事件
				$("#d1").click(function(){
					//给html赋值
					html+=ch1+"_1"+ch2;
					//修改email输入框的值
					$("#useremail").val(html);
					//下拉框隐藏
					$("#emaildiv").hide();
					//将错误提示取消
					$("#span5").html("");
					check+=1;
				});
				$("#d2").click(function(){
					html+=ch1+"_2"+ch2;
					$("#useremail").val(html);
					$("#emaildiv").hide();
					$("#span5").html("");
					check+=1;
				});
				$("#d3").click(function(){
					html+=ch1+"_3"+ch2;
					$("#useremail").val(html);
					$("#emaildiv").hide();
					$("#span5").html("");
					check+=1;
				});
				//检查email是否正确
				$("#useremail").change(function(){
					//正则表达式
					 var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
		            if (!reg.test(useremail.val())) {
		                $("#span5").html("<font color='red'>邮箱输入有误</font>");
		                errormessage+="邮箱输入有误"
		                check-=1;
		            }
		       		else{
						$("#span5").html("");
						check+=1;
						for(var j=0;j<email.length;j++){
							//判断输入的email和数组里的是否有相同的
							if(useremail.val()==email[j]){
								check-=1;
								//截取@之前的子串和@(包含)之后的子串
							    ch1=useremail.val().substring(0,useremail.val().indexOf('@'));
								ch2=useremail.val().substring(useremail.val().indexOf('@'),useremail.val().length);
								$("#span5").html("<font color='red'>邮箱已存在(请重新输入或选择为您提供的账号)</font>");
								//提供错误提示(所有出现的errormessage的都与提交有关可以不用考虑了)
								errormessage+="邮箱已存在";
								$("#emaildiv").show();
								//给下拉框赋值   这里就是和错误提示一样的做法，但是是在两个子串中间添加_num
								$("#s1").html("<font>"+ch1+"_1"+ch2+"</font><br/>");
								$("#s2").html("<font>"+ch1+"_2"+ch2+"</font><br/>");
								$("#s3").html("<font>"+ch1+"_3"+ch2+"</font><br/>");
								break;
							}
						}
					}
				});
				
				
			})
			
		</script>
	</head>
	<body>
		<div id="div1">
			<!--设置界面-->
			<div id="">
				账号:
				<input type="text" name="username" id="username"  /><span id="span1"></span>
			</div>
			<div id="">
				密码:
				<input type="password" name="userpwd" id="userpwd"  /><span id="span2"></span>
			</div>
			<div id="">
				确密:
				<input type="password" name="surepwd" id="surepwd"  /><span id="span3"></span>
			</div>
			<div id="">
				手机:
				<input type="text" name="userphone" id="userphone"  /><span id="span4"></span>
			</div>
			<div id="">
				邮箱:
				<input type="text" name="useremail" id="useremail"  /><span id="span5"></span>
				<br />
				<!--在邮箱下面添加DIV模块   里面有三个元素-->
				<div id="emaildiv" style="display: none;">
					<div id="d1"><span id="s1"></span></div>
					<div id="d2"><span id="s2"></span></div>
					<div id="d3"><span id="s3"></span></div>
				</div>
				
				
				
				
				
				
				
				<div>
					<input type="button" class="notice" name="submit id="submit" value="提交" />
				</div>
			</div>
			
		</div>
	</body>
</html>

汉卿HanQi_J.i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
大数据(前期铺垫)————JQuery学习2.1 time: 2019.9.12

页面效果图:在这里最难的地方就是当邮箱已经存在的时候下拉框的弹出，我这里简单说一下我的做法。----(数据和展示分离)1.因为在做这个之前做过一个光标在输入框时会出现一个下拉框。所以我还是按照那种做法 ----把下拉框先做出来，但是和那个不同的是没有对应的属性值(可以参考当出现与规则不一样的情况下的span)所以我先做了三个空的div模块，每个div模块后有一个span&lt...
复制链接

扫一扫