这大概是一种惯例，学习前台后台最开始接触的业务都是用户注册和登录。现在社会坚持以人为本的理念，在网站开发过程同样如此。User是我们面对较多的对象，也是较核心的对象。最开始的用户注册和登陆这块，也就尤为重要。
用户注册和登录其实往往比我们想象的难。就比如表单校验，里面涵盖的内容其实挺多，就前台而言，你需要了解：
1.正则表达式的基本了解
其实正则并不难，并且在学会后能带给你极大的成就感，享受那种事半功倍的效果吧。
2.ajax异步请求
在验证用户名是否存在、用户登录时账号或者密码错误时给出相应的提示。
3.一些方便的验证库，比如jQuery.validate
正因为如此普遍的需求和一定的复杂性，bootstrap表单和jQuery.validate表单校验等一些优秀的类库专为人们解决UI、表单校验问题。
下面就是我用bootstrap+jQuery.validate做的界面：
bootstrap3基本表单和水平表单
基本表单
基本的表单结构是 Bootstrap 自带的，下面列出了创建基本表单的步骤：
向父元素<form> 添加 role="form"。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。
<form role="form"> <div> <label for="name">名称</label> <input type="text" placeholder="请输入名称"> </div> </form>
效果如下：
水平表单
在了解水平表单之间，我们应该对bootstrap的网格系统有所了解。
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列,也就是说它是以百分比定义宽度的。
水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：
向父 <form> 元素添加 class .form-horizontal。
把标签和控件放在一个带有 class .form-group 的 <div> 中。
向标签添加 class .control-label。
<form role="form"> <div> <label for="firstname">名字</label> <div> <input type="text" placeholder="请输入名字"> </div> </div> </form>
效果如下：
jQuery.validate 自定义校验方法
自定义校验方法
// 手机号码验证 jQuery.validator.addMethod("isPhone", function(value, element) { var length = value.length; return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value)); }, "请正确填写您的手机号码。");
调用自定义校验
rules : { phone : { required : true, isPhone : true } }
自定义错误显示
参数 类型 描述 默认值 errorClass String 指定错误提示的 css 类名，可以自定义错误提示的样式。 "error" errorElement String 用什么标签标记错误，默认是 label，可以改成 em。 "label" errorPlacement function 跟一个函数，可以自定义错误放到哪里。 input元素之后 success