本文实例讲述了jQuery实现高度灵活的表单验证功能。分享给大家供大家参考，具体如下：
表单验证是前端开发过程中常见的一个需求，产品需求、业务逻辑的不同，表单验证的方式方法也有所区别。而最重要的是我们要清楚，表单验证的核心原则是——错误信息提示准确，并且尽可能少的打扰/干扰用户的输入和体验。
该插件依赖于jQuery，demo地址：https://github.com/CaptainLiao/zujian/tree/master/validator
基于以上原则，个人总结出表单验证的通用方法论：
为了使开发思路更加清晰，我将表单验证的过程分为两步：第一步，用户输入完验证当前输入的有效性；第二步，表单提交时验证整个表单。考虑如下布局：
<form action="">
<ul>
<li><label for="username">用户名</label>
<input type="text" name="username" id="username" placeholder="用户名"/></li>
<li>
<label for="password">密码</label>
<input type="text" name="password" id="password" placeholder="密码"/>
</li>
<li>
<label for="password">确认密码</label>
<input type="text" name="password2" id="password-confirm" placeholder="确认密码"/>
</li>
<li>
<label for="phone">手机</label>
<input type="text" name="mobile" id="phone"/>
</li>
<li>
<label for="email">邮箱</label>
<input type="text" name="email" id="email"/>
</li>
</ul> <button type="submit" id="submit-btn">提交</button>
</form>
一个较为通用的JS验证版本如下：
(function (window, $, undefined) {
/**
* @param {String} $el 表单元素
* @param {[Array]} rules 自定义验证规则
* @param {[Boolean]} isCheckAll 表单提交前全文验证
* @param {[Function]} callback 全部验证成功后的回调
* rules 支持四个字段：name, rule, message, equalTo
*/
function Validator($el, rules, isCheckAll, callback) {
var required = 'required';
var params = Array.prototype.slice.call(arguments);
this.$el = $el;
this._rules = [
{// 用户名
username: required,
rule: /^[u4e00-u9fa5w]{6,12}$/,
message: '不能包含敏感字符'
}, {// 密码
password: required,
rule: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_@]{6,20}$/,
message: '只支持数字字母下划线,且不为纯数字或字母'
}, {// 重复密码
password2: required,
