小实操（5）：利用正则来实现我们注册表单时的内容匹配

本文链接：https://blog.csdn.net/qq_45948983/article/details/107061540

。。。。。。。

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>