用户注册信息验证功能（前端+后台）

一、写在前面罗里吧嗦的话

最近在写自己的第一个个人项目，开始写了很久了，但是每天没啥时间记录，趁着周末先记录一些思路和踩过的坑。

项目预计是做一个关于家装的电商网站，样式参考自土巴兔网站（我不是打广告！）。目前写了几个静态页面，写得有点审美疲劳，遂决定写一写后台JS换换心情~

之前听师兄说登录注册俩小时就能搞定，想一想不如就先写登陆注册吧，反正用不了多久。好吧，事实光速打脸了，我怎么就把自己对号入座了呢？（好吧，我菜了，真的要勤加练习啊！！！）每天抽空写一写，删删改改居然鼓捣了几天才写完（再一次泪奔）。

言归正传，还是说说我的实现思路和踩到的坑吧（T_T）。

声明：本项目目前采用jQuery框架！！！

二、功能实现的思路

2.1 前端格式验证

注册界面我设计了四个输入框，分别是：手机号、用户名和两次密码。

手机号---满足一般手机号码格式：/^1[34578]\d{9}$/

用户名---4-16位,可选择包含字母，数字，下划线：/^[\w\u4e00-\u9fa5]{4,16}$/

密码---6-16位，其中必须含有数字、字母和特殊符号：/^.*(?=.{6,16})(?=.*\d)(?=.*[A-Za-z])(?=.*[!@#$%^&*?\(\)\.]).*$/

二次密码：比较和上述密码是否一致，返回判断结果。

坑1（严格来讲这不算坑，只是我学艺不精 >_<）：密码的正则涉及一个先行断言。在符号“(?=” 和 “)” 之间加入一个表达式，它就是一个先行断言，用以说明圆括号内的表达式必须正确匹配。比如：/Java(?=\:)/ 只能匹配Java且后面有冒号的。

思路：每当输入框失去焦点（blur事件）时，默认用户完成当前输入框信息的录入，触发该输入框信息的正则验证，根据正则验证的结果决定是否给用户错误提示（HTML文档中input输入框的下一个兄弟元素next为错误提示内容，控制其display样式，正则验证失败进行提示display:block，成功则隐藏错误提示display:none）。

优化：此处我为了界面的美观性，当正则验证失败时，使输入框的边框变为红色（本来获得焦点时是主题色），这个也挺好办，就是麻烦了点——在CSS文件里写个样式，用JS动态为该input添加（addClass()）/删除（removeClass()）该样式就OK啦。

2.2 后台数据库查询验证

主要是验证手机号和用户名是否已被占用（不能重复注册嘛！），然后对用户进行错误提示。

用户名：未被占用--->不进行错误提示（意思就是这是可用的啦）

               被占用---->进行错误提示

密码：功能需求同上，就是错误提示的内容不一样

思路：说在前面，此处的错误提示默认修改2.1中相应位置的错误提示内容。当前端页面的手机号/用户名输入框失去焦点时（此时默认用户输入完成），用jQuery封装好的ajax函数将用户当前输入的手机号/用户名发送给服务器端，在服务器端获取到前端传过来的数据，再将其传入数据库的查询sql语句中，根据返回结果result（result是一个数组，请牢记！）的长度，判断该手机号/用户名是否已被占用，并将此结果返回给前端页面，然后前端页面据此进行错误提示。

简单来讲，就是前端页面将用户当前输入的数据传给后端服务器进行数据库查询，并返回查询结果，前端页面再根据此结果决定是否进行错误提示。

2.3 点击注册

前端验证和后台验证均通过且勾选同意条款的复选框（isAgree）

前端正则验证通过：regResult = true;

后台数据验证通过：re