前端学习之JS+正则表达式（写一个简单的注册页面）

注册页面

在日常生活中我们常常需要在各种软件中注册账号信息。包括社交软件，游戏等等。他们对于账号密码的需求也大不一样。有的较为官方的软件机构网址等需要比较复杂的账号密码，而有的则比较宽松。我们知道注册页面其实就是一个表单，用户填写完表单后提交然后注册。

正则表达式

那么如何让用户按照程序猿规定的规则进行注册呢？一般会用到正则表达式，正则表达式在百度百科上是这样介绍：正则表达式，又称规则表达式。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。 简单来说就是提前写好规则，用户在输入时使用onblur事件来查看用户输入的是不是满足规则。下面直接上代码

HTML部分

<div id="app">		
	<form action="#" method="post" class="form">
		用户名：　<input type="text" name="username" id="username" onblur="user"/><span id="tipuser">span><br>
		密　码：　<input type="text" name="password" id="password" onblur="pass"/><span id="tippass">span><br>
		确认密码：<input type="text" name="checkpas" id="checkpas" onblur="checkpass"/><span id="tipcheckpass">span><br>
		邮　箱：　<input type="text" name="email" id="email" onblur="email"/><span id="tipemail">span><br>	
		<input type="submit" value="注册" style="float: left;margin: 10px;"/>
		<input type="reset" value="重置" style="float: right;margin: 10px;"/>
	form>
	div>

这里值得注意的是要设置好每个input的id，在js中通过dom操作来获取值以及对span的innertext进行变幻。不再赘述

JS部分

//用户名部分
			//获取username的span标签
			var usertip = document.getElementById("tipuser");
			//获取用户名
			var user=document.getElementById("username")
			var username=user.value;
			
			//给用户名文本框绑定blur事件
			user.onblur=function(){
				var username=user.value;
				//去除前后空白
				var username=username.trim();
				
				//判断用户名是否为空
				if(username!==""){
					//username不为空
					//继续判断长度[6-14]
					if(user.value.length<6||user.value.length>14){
						//用户名长度非法
						usertip.innerText="对不起！用户名长度必须要在[6~14]位之间";
					}else{
						//用户名长度合法
						//继续判断是否含有特殊符号
						//使用正则表达式
						var regExp=/^[A-Za-z0-9]+$/;
						var ok=regExp.test(username);
						if(ok){
							//用户名最终合法
							usertip.style.color="green";
							usertip.innerText="√您输入的用户名可以使用";
						}else{
							//用户名有特殊符号
							usertip.innerText="对不起！用户名只能由数字和字母组成";
						}
					}

				}else {
					//username为空
					usertip.innerText="对不起！用户名不能为空！";
				}
			}
			//给username获取焦点函数
			user.onfocus =function(){
				//获取用户名
				var user=document.getElementById("username")
				var username=user.value;
				
				if(usertip.innerText!=""){
					//注意不要获取错
					//之前一直username.value但是username其实就是user.value，容易记混
					user.value="";
					
				}
				//清空span
				usertip.innerText="";
			}

首先获取到输入框id为username的input的值。使用trim函数能够去除用户输入的空白。避免用户输入了6个空格也判定为6个字符串而导致错误。然后使用if语句进行判断不为空继续进入下一if判断，若为空则让span展示内容“对不起！用户名不能为空”。
接下来是用户名长度，我设置为6~14位。用if语句即可 如果小于6位大于14位直接提示，如果满足长度条件。
最后一个if判断。这里就需要正则表达式帮忙。 var一个对象用来引用正则表达式，正则表达式用两个’/'进行包裹。‘^‘作为开头，‘$‘结束。 / ^ [A-Za-z0-9 ]+ $ /的意思就是输入的字符串可以是字母，大小写都可以以及数字的组合。不能出现特殊符号。

var ok=regExp.test(username);

语句的作用就是检测username是否符合条件，也就是用户输入的用户名是否满足正则表达式的要求。返回的是true或flase，最后一个if基于返回的值做判断即可。
最后考虑到交互的方便性。多加一个事件，focus事件，当用户点击input框时执行。作用是当用户上一次输入的用户名不合法的时候 把非法的用户名清空掉。判断的条件则是span内容的有无。如果不为空说明刚刚用户输入的是错误格式的用户名，所以直接把value清空。

总结

接下里的密码确认密码邮箱等等都是照猫画虎。唯一的区别就是正则表达式，但是我们遇到使用正则表达式的机会时，大多不需要自己编写。许多常用的正则表达式百度一下都有，也可以下载一个正则表达式的帮助文档，上面的例子基本满足基础的开发需求。