注册页面
在日常生活中我们常常需要在各种软件中注册账号信息。包括社交软件，游戏等等。他们对于账号密码的需求也大不一样。有的较为官方的软件机构网址等需要比较复杂的账号密码，而有的则比较宽松。我们知道注册页面其实就是一个表单，用户填写完表单后提交然后注册。
正则表达式
那么如何让用户按照程序猿规定的规则进行注册呢？一般会用到正则表达式，正则表达式在百度百科上是这样介绍：正则表达式，又称规则表达式。（英语：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清空。
总结
接下里的密码确认密码邮箱等等都是照猫画虎。唯一的区别就是正则表达式，但是我们遇到使用正则表达式的机会时，大多不需要自己编写。许多常用的正则表达式百度一下都有，也可以下载一个正则表达式的帮助文档，上面的例子基本满足基础的开发需求。