小实操(5):利用正则来实现我们注册表单时的内容匹配

**

实例: 利用html表单和js的数学对象及函数做一个有验证码的简单登录表单

实操:利用日期对象和方法以及其他相关知识实现简单的钟表功能

小实操(3): 利用键盘事件实现小人快跑

小实操(4):实现飞机的移动并且能够发射子弹

。。。。。。。

js学习中的小实操(目录)

**
          前几天期末了在考试唉,紧张刺激的期末环节终于是结束了,当然专业知识是还要继续学习的,我们专业暑假的作业就是把js后面剩下的部分学完然后记录笔记,后面大概还剩一半,加油,今天起继续开始更新笔记。兄弟们走起
**

       关注小文我们一起学习进步。

实操:

      前两天我们学习了正则,那今天先来简单的做一个训练:我们在注册账号密码的时候,很多时候都会限定,比如我们王者的用户名,只能是七个字以内,而且不能出现空格符号。我们今天就简单的做一下这样类似的练习。

    首先我们先来做一个简单的html注册页面界面。

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册界面</title>
		<style type="text/css">
			.z{				
				margin-top: 200px;
				margin-left: 550px;
				width: 430px;
				height: 300px;
			}
			button[type=reset]{
				width: 100px;
			}
			
			button[type=submit]{
				width: 100px;
			}
			body{
					background-image: url(img/26.jpg);
					background-size: 1575px 750px;
			}
				
			
		</style>
	</head>
	<body>
		<div class="z">
			
			<form action="z4.html">
				<fieldset>
					<legend>用户注册</legend>
					
				<label for="用户名">设置用户名</label>
				<input type="text" name="用户名" id="zc"/> <span></span> <br /><br />
				
				&nbsp;&nbsp;<label for="用户账号">用户账号</label>
				&nbsp;&nbsp;<input type="text" name="用户账号" id="zh"/> <span></span> <br /><br />
				
				&nbsp;&nbsp;<label for="设置密码">设置密码</label>
				&nbsp;&nbsp;<input type="password" name="password" id="mm"/> <span></span> <br /><br />
				
				&nbsp;&nbsp;<label for="确认密码">确认密码</label>
				&nbsp;&nbsp;<input type="password" name="password" id="mm2"/> <span></span> <br /><br />
				
				<input type="radio" name="已同意" />我已详细阅读并同意你的阿wen粉丝协议和隐私保护指引<br /><br />
				<button type="reset">重置</button>
				<button type="submit">确认注册</button>
				</fieldset>
			</form>
		</div>
		</body>
</html>

执行结果:

做的丑,兄弟们见谅见谅,

         注意:光理论是不够的,技术是不断更新的。在此赠送2020最新企业级Vue3.0/Js/ES6/TS/React/node等实战视频教程,想学的可进裙 519293536 免费获取,小白勿进哦!

        这个时候任意的数字都是可以的,这个时候我们要写js代码来实现效果,只有当我们的输入框内输入符合我们正则的字符我们的输入框后会提示“✔”,如果不符合规范的就会提示“❌”,

 规范:  1、我们的用户名可以是任意字符,但是换行符除外,字数在三到七之间
         2、我们的账号只能是数字,位数最低7位,最高11位。
         3、我们的密码是非空格任意字符,但是至少六位

js代码如下:

		<script>
		//获取节点
			var zc = document.getElementById("zc");
			
			zc.onblur = function(){				
				var reg_name=/^.{3,7}$/
				
				if( reg_name.test(this.value)){
					this.nextElementSibling.innerHTML = "✔";
				}else{
					this.nextElementSibling.innerHTML = "❌";
				}
			}
			
			var zh= document.getElementById("zh");			
			zh.onblur = function(){
				//账号只能是七到十一位的数字
				var reg_zh = /^\d{7,11}$/
				
				if(reg_zh.test(this.value)){
					this.nextElementSibling.innerHTML = "✔";
				}else{
					this.nextElementSibling.innerHTML = "❌";
				}
			}

			
			var mm= document.getElementById("mm");			
			mm.onblur = function(){
				//密码可以是数字、字母或者下划线 至少六位数
				var reg_mm =/^\S{6,}$/;
				
				if(reg_mm.test(this.value)){
					this.nextElementSibling.innerHTML = "✔";
				}else{
					this.nextElementSibling.innerHTML = "❌";
				}
			}
			
			var mm2 = document.getElementById("mm2");
			
			mm2.onblur = function(){
				if(this.value==mm.value){
					this.nextElementSibling.innerHTML = "✔";
				}else{
					this.nextElementSibling.innerHTML = "❌";
				}
			}
		</script>

       执行结果:这里你可以看出,少写或者错写,与我们的正则不匹配,则后面会显示错误,只有当我们输入和我们正则相匹配的字符,才会显示正确

做这个练习的时候里面有两个知识是前面没学到的,这里进行 补充记录:

知识补充

1、onblur事件

解释:onblur事件是在我们的对象失去焦点时执行的事件

简单的举例:你可以想做我们有一个输入框,当我们点击它的时候,看见一根线在闪烁那就是获得焦点,当你点击下一个输入框,或者点击输入框外的其他地方,那个框的线就会消失不见,那个时候就是失去焦点的时候。

2、nextElementSibling

解释:返回指定节点的下一个兄弟节点

在我们上面做的训练中,前面输入框的下一个节点就是紧跟在后面的 span ,所以给它添加效果,那也就是给后面的span添加效果。


              It’s hard to be sad about something like this, but it will pass after all.
                                                                    --------------难过这种东西 难是难 但终究会过

小实操(5):利用正则来实现我们注册表单时的内容匹配_第1张图片

你可能感兴趣的:(js,javascript,html)