用原生JS写注册页面，正则表达式验证手机号和密码，编写一个简约模板

这是一个简单的注册页面，DOM事件onclick,onblur(失去焦点）。
大概写个简单的页面，包含手机号、输入密码、确认密码（其中密码可以显示或隐藏）。
当所有条件未成立的时候，将会显示填写信息有误。

关于图片的小建议：里面有睁眼和闭眼的图片，可以去阿里巴巴矢量图标库去自行下载，可以自行调整大小。

下面是完整代码部分：

HTML部分：

<div class="register">
			<div class="tel-box">
		       手机号：<input class="box" id="tel" placeholder="请输入您的手机号" /><span id="tip">您的手机号码不合法！</span>
		       <img id="image" src="img/right.jpg" />
			</div>
			<br/>
			<div class="pass">
				登录密码：<input type="password" class="box" id="psd"placeholder="请输入登录密码" /><span id="psd_tip">密码的格式不正确！</span>
				<!--默认隐藏-->
	            <label><img src="img/clo-eyes.jpg" id="eyes"></label>
            </div>
			<br/>
			<div class="pass">
			        确认密码：<input type="password" class="box" id="psd_second"placeholder="请确认密码" /><span id="pswd_tip">与第一次密码不一致！</span>
				 <label><img src="img/clo-eyes.jpg" id="eyes"></label>
			</div>
			<div id="btn">注册</div>
		</div>

css部分：

*{margin: 0;padding: 0;}
			.register{margin: auto;width: 600px;height: 500px; padding-top: 100px;}
			.box{width: 320px;height: 40px;}
			.tel-box{padding-left: 16px;}
			#btn{width: 320px; height: 40px; background: #5696ff; font-size: 18px; color: #fff; 
                line-height: 40px; margin-top: 18px; border-radius: 4px;margin-left: 83px;text-align: center;}
            #tip,#image,#psd_tip,#pswd_tip{display: none;color: red;font-size:12px;}
            .pass{position: relative;}
             #eyes {width: 18px;position: absolute;top: 20px;right: 200px;}

JavaScript部分：

<script>
			var tel=document.getElementById("tel");
			var span=document.getElementById("tip");
			var img=document.getElementById("image");
			var tel_reg=/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/
			var psd=document.getElementById("psd");
			var psd_tip=document.getElementById("psd_tip")
			var psd_reg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{4,8}$/
			var psd_second=document.getElementById("psd_second");
			var pswd_tip=document.getElementById("pswd_tip");
			var input = document.querySelector("input");
		    var imgs = document.getElementById("eyes");
		    var btn=document.getElementById("btn");
			//验证手机号
			tel.onblur=function(){
				if(tel_reg.test(tel.value)){
					tip.style.display="none"
					image.style.display="inline"
				}else{
					tip.style.display="inline"
					image.style.display="none"
				}
			}
			//验证密码
			psd.onblur=function(){
				if(psd_reg.test(psd.value)){
					psd_tip.style.display="none"
				}else{
					psd_tip.style.display="inline"
				};
				if(psd_second.value===psd.value){
					pswd_tip.style.display="none";
				}else if(psd.value!=psd_second.value&&psd_second.value!=""){
					pswd_tip.style.display="inline";
				}
			}
		    //验证二次密码
			psd_second.onblur=function(){
				if(psd_second.value==psd.value){
					pswd_tip.style.display="none"
				}else{
					pswd_tip.style.display="inline"
				}
			}
			//密码显示与隐藏
		    var flag = 0;
		    eyes[0].onclick = function () {
		      if (flag == 0) {
		        psd.type = "text";
		        eyes[0].src = "img/op-eyes.jpg";//显示
		        flag = 1;
		      } else {
		        psd.type = "password";
		        eyes[0].src = "img/clo-eyes.jpg";//隐藏
		        flag = 0;
		      }
		    }
		    var flag1 = 0;
		    eyes[1].onclick = function () {
		      if (flag1== 0) {
		        psd_second.type = "text";
		        eyes[1].src = "img/op-eyes.jpg";//显示
		        flag1 = 1;
		      } else {
		        psd_second.type = "password";
		        eyes[1].src = "img/clo-eyes.jpg";//隐藏
		        flag1 = 0;
		      }
		    }
			//注册按钮
			btn.onclick=function(){
				if(tel_reg.test(tel.value)&&psd_reg.test(psd.value)&&psd_second.value==psd.value){
					alert("注册成功")
				}else{
					alert("填写信息有误")
				}
			}
		</script>

效果图：

到这里，一个简单的注册功能就完成啦~