本文实例讲述了jQuery实现高度灵活的表单验证功能。分享给大家供大家参考，具体如下：表单验证是前端开发过程中常见的一个需求，产品需求、业务逻辑的不同，表单验证的方式方法也有所区别。而最重要的是我们要清楚，表单验证的核心原则是——错误信息提示准确，并且尽可能少的打扰/干扰用户的输入和体验。该插件依赖于jQuery，demo地址：https://github.com/CaptainLiao/zujian/tree/master/validatorhttps://github.com/CaptainLiao/zujian/tree/master/validator基于以上原则，个人总结出表单验证的通用方法论：为了使开发思路更加清晰，我将表单验证的过程分为两步：第一步，用户输入完验证当前输入的有效性；第二步，表单提交时验证整个表单。考虑如下布局：

• 用户名
  
  



• 
  
  密码
  
  
  
  



• 
  
  确认密码
  
  
  
  



• 
  
  手机
  
  
  
  



• 
  
  邮箱
  
  
  
  

提交

• 用户名
  
  



• 
  
  密码
  
  
  
  



• 
  
  确认密码
  
  
  
  



• 
  
  手机
  
  
  
  



• 
  
  邮箱
  
  
  
  

提交

一个较为通用的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-\u9fa5\w]{6,12}$/,

message: '不能包含敏感字符'

}, {// 密码

password: required,

rule: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_@]{6,20}$/,

message: '只支持数字字母下划线,且不为纯数字或字母'

}, {// 重复密码

password2: required,

rule: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_@]{6,20}$/,

message: '只支持数字字母下划线,且不为纯数字或字母',

equalTo: 'password'

}, {// 手机

mobile: required,

rule: /^1[34578]\d{9}$/,

message: '请输入有效的手机号码'

}, {// 验证码

code : required,

rule: /^\d{6}$/,

message: '请输入6位数字验证码'

}, {// 邮箱

email : required,

rule: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,

message: '请输入正确的邮箱'

}

];

this.isCheckAll = false;

this.callback = callback;

// 合并参数

this._rules = this._rules.concat(params[1]);

if(params[2]) {

if(typeof params[2] == 'function') {

this.callback = params[2];

}else {// 提交表单时是否开启全部验证

this.isCheckAll = params[2];

}

}

// 用于存储合去重后的参数

this.rules = [];

}


Validator.prototype._getKey = function (obj) {

var k = '';

for(var key in obj) {

if(obj.hasOwnProperty(key)) {

if( key !== 'rule' && key !== 'message' && key !== 'equalTo') {

k = key;

}

}

}

return k;

};

/**

* 数组对象重复数据进行合并，后面的覆盖前面的

*/

Validator.prototype.filterRules = function (arrObj) {

var _this = this,

h = {},

res = [],

arrObject = this._rules;

$.each(arrObject, function (i, item) {

var k = _this._getKey(item);

try {

if(!h[k] && h[k] !== 0) {

h[k] = i;

res.push(item);

}else {

res[h[k]] = $.extend(res[h[k]], item);

}

}catch(e) {

throw new Error('不是必填')

}

});

this.rules = res;

};


Validator.prototype.check = function () {

var _this = this;

$.each(_this.rules, function (i, item) {

var key = _this._getKey(item),

reg = item.rule,

equalTo = item.equalTo,

errMsg = item.message;


_this.$el.find('[name='+key+']')

.on('blur', function () {

var $this = $(this),

errorMsg = '',

val = $this.val(),

ranges = reg.toString().match(/(\d*,\d*)/),

range = '',

min = 0,

max = 0,

placeholderTxt = $(this).attr("placeholder") ? $(this).attr("placeholder") : '信息';


// 定义错误提示信息

if(val && val != 'undefined') { // 值不为空


if(ranges) { // 边界限定

range = ranges[0];

min = range.split(',')[0] ? range.split(',')[0].trim() : 0;

max = range.split(',')[1] ? range.split(',')[1].trim() : 0;

if(val.length < min || val.length > max) { // 处理边界限定的情况

if(min && max) {

errorMsg = '请输入'+min+'-'+max+'位'+placeholderTxt+'';

}else if(min) {

errorMsg = '最少输入'+min+'位'+placeholderTxt+'';

}else if(max) {

errorMsg = '最多输入'+max+'位'+placeholderTxt+'';

}

}else { // 边界正确但匹配错误

errorMsg = ''+errMsg+'';


}

}else { // 没有边界限定

errorMsg = ''+errMsg+'';

}


if(equalTo) {

var equalToVal = _this.$el.find('[name='+equalTo+']').val();

if(val !== equalToVal) {

errorMsg = '两次输入不一致，请重新输入';

}

}


} else { // 值为空

errorMsg = '请输入'+placeholderTxt+''

}

if($('.error-msg').length > 0) return;


// 验证输入，显示提示信息

if(!reg.test(val) || (equalTo && val !== equalToVal)) {

if($this.siblings('.error-msg').length == 0) {

$this.after(errorMsg)

.siblings('.error-msg')

.hide()

.fadeIn();

}

}else {

$this.siblings('.error-msg').remove();

}

})

.on('focus', function () {

$(this).siblings('.error-msg').remove();

})

});


};

Validator.prototype.checkAll = function () {

var _this = this;

if(_this.isCheckAll) {

_this.$el.find('[type=submit]')

.click(function () {

_this.$el.find('[name]').trigger('blur');

if($('.error-msg').length > 0) {

console.log('有错误信息');

return false;

}else {

console.log('提交成功');

_this.callback();

}

});

return false;

}

};

Validator.prototype.init = function () {

this.filterRules();

this.check();

this.checkAll();

};

$.fn.validator = function (rules, isCheckAll, callback) {

var validate = new Validator(this, rules, isCheckAll, callback);

return validate.init();

};
})(window, jQuery, undefined);


(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-\u9fa5\w]{6,12}$/,

message: '不能包含敏感字符'

}, {// 密码

password: required,

rule: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_@]{6,20}$/,

message: '只支持数字字母下划线,且不为纯数字或字母'

}, {// 重复密码

password2: required,

rule: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_@]{6,20}$/,

message: '只支持数字字母下划线,且不为纯数字或字母',

equalTo: 'password'

}, {// 手机

mobile: required,

rule: /^1[34578]\d{9}$/,

message: '请输入有效的手机号码'

}, {// 验证码

code : required,

rule: /^\d{6}$/,

message: '请输入6位数字验证码'

}, {// 邮箱

email : required,

rule: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,

message: '请输入正确的邮箱'

}

];

this.isCheckAll = false;

this.callback = callback;

// 合并参数

this._rules = this._rules.concat(params[1]);

if(params[2]) {

if(typeof params[2] == 'function') {

this.callback = params[2];

}else {// 提交表单时是否开启全部验证

this.isCheckAll = params[2];

}

}

// 用于存储合去重后的参数

this.rules = [];

}


Validator.prototype._getKey = function (obj) {

var k = '';

for(var key in obj) {

if(obj.hasOwnProperty(key)) {

if( key !== 'rule' && key !== 'message' && key !== 'equalTo') {

k = key;

}

}

}

return k;

};

/**

* 数组对象重复数据进行合并，后面的覆盖前面的

*/

Validator.prototype.filterRules = function (arrObj) {

var _this = this,

h = {},

res = [],

arrObject = this._rules;

$.each(arrObject, function (i, item) {

var k = _this._getKey(item);

try {

if(!h[k] && h[k] !== 0) {

h[k] = i;

res.push(item);

}else {

res[h[k]] = $.extend(res[h[k]], item);

}

}catch(e) {

throw new Error('不是必填')

}

});

this.rules = res;

};


Validator.prototype.check = function () {

var _this = this;

$.each(_this.rules, function (i, item) {

var key = _this._getKey(item),

reg = item.rule,

equalTo = item.equalTo,

errMsg = item.message;


_this.$el.find('[name='+key+']')

.on('blur', function () {

var $this = $(this),

errorMsg = '',

val = $this.val(),

ranges = reg.toString().match(/(\d*,\d*)/),

range = '',

min = 0,

max = 0,

placeholderTxt = $(this).attr("placeholder") ? $(this).attr("placeholder") : '信息';


// 定义错误提示信息

if(val && val != 'undefined') { // 值不为空


if(ranges) { // 边界限定

range = ranges[0];

min = range.split(',')[0] ? range.split(',')[0].trim() : 0;

max = range.split(',')[1] ? range.split(',')[1].trim() : 0;

if(val.length < min || val.length > max) { // 处理边界限定的情况

if(min && max) {

errorMsg = '请输入'+min+'-'+max+'位'+placeholderTxt+'';

}else if(min) {

errorMsg = '最少输入'+min+'位'+placeholderTxt+'';

}else if(max) {

errorMsg = '最多输入'+max+'位'+placeholderTxt+'';

}

}else { // 边界正确但匹配错误

errorMsg = ''+errMsg+'';


}

}else { // 没有边界限定

errorMsg = ''+errMsg+'';

}


if(equalTo) {

var equalToVal = _this.$el.find('[name='+equalTo+']').val();

if(val !== equalToVal) {

errorMsg = '两次输入不一致，请重新输入';

}

}


} else { // 值为空

errorMsg = '请输入'+placeholderTxt+''

}

if($('.error-msg').length > 0) return;


// 验证输入，显示提示信息

if(!reg.test(val) || (equalTo && val !== equalToVal)) {

if($this.siblings('.error-msg').length == 0) {

$this.after(errorMsg)

.siblings('.error-msg')

.hide()

.fadeIn();

}

}else {

$this.siblings('.error-msg').remove();

}

})

.on('focus', function () {

$(this).siblings('.error-msg').remove();

})

});


};

Validator.prototype.checkAll = function () {

var _this = this;

if(_this.isCheckAll) {

_this.$el.find('[type=submit]')

.click(function () {

_this.$el.find('[name]').trigger('blur');

if($('.error-msg').length > 0) {

console.log('有错误信息');

return false;

}else {

console.log('提交成功');

_this.callback();

}

});

return false;

}

};

Validator.prototype.init = function () {

this.filterRules();

this.check();

this.checkAll();

};

$.fn.validator = function (rules, isCheckAll, callback) {

var validate = new Validator(this, rules, isCheckAll, callback);

return validate.init();

};
})(window, jQuery, undefined);

你可以这样使用：

var rules = [

{// 用户名

username: 'required',

rule: /^[\u4e00-\u9fa5\d]{6,12}$/,

message: '只支持数字loo2222'

},

{// 密码

password: 'required',

rule: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_@]{6,20}$/,

message: 'mimmimmia'

},

{// 重复密码

password2: 'required',

rule: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_@]{6,20}$/,

message: '只支持数字字母下划线,不能为纯数字或字母2222',

equalTo: 'password'

},

{// 座机

telephone : 'required',

rule: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/,

message: '请输入正确的座机'

}

];

$('form').validator(rules, true)



var rules = [

{// 用户名

username: 'required',

rule: /^[\u4e00-\u9fa5\d]{6,12}$/,

message: '只支持数字loo2222'

},

{// 密码

password: 'required',

rule: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_@]{6,20}$/,

message: 'mimmimmia'

},

{// 重复密码

password2: 'required',

rule: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_@]{6,20}$/,

message: '只支持数字字母下划线,不能为纯数字或字母2222',

equalTo: 'password'

},

{// 座机

telephone : 'required',

rule: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/,

message: '请输入正确的座机'

}

];

$('form').validator(rules, true)

PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：JavaScript正则表达式在线测试工具：
http://tools./regex/javascriptJavaScript正则表达式在线测试工具：
JavaScript正则表达式在线测试工具：
http://tools./regex/javascript正则表达式在线生成工具：
http://tools./regex/create_reg正则表达式在线生成工具：
正则表达式在线生成工具：
http://tools./regex/create_reg关于jQuery相关内容可查看本站专题：《jQuery正则表达式用法总结》、《jQuery字符串操作技巧总结》、《jQuery操作xml技巧总结》、《jQuery扩展技巧总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》jQuery正则表达式用法总结jQuery字符串操作技巧总结jQuery操作xml技巧总结jQuery扩展技巧总结jquery选择器用法总结jQuery常用插件及用法总结希望本文所述对大家jQuery程序设计有所帮助。