本文实例讲述了jquery实现表单验证代码。分享给大家供大家参考。具体如下：
运行效果截图如下：
具体代码如下：
直接上插件实现代码了，围绕代码进行讲解比较容易点：
/*
描述：基于jquery的表单验证插件。
*/(function ($) {
$.fn.checkForm = function (options) {
var root = this; //将当前应用对象存入root
var isok = false; //控制表单提交的开关
var pwd1; //密码存储
var defaults = {
//图片路径
img_error: "img/error.gif",
img_success: "img/success.gif",
//提示信息
tips_success: '', //验证成功时的提示信息，默认为空
tips_required: '不能为空',
tips_email: '邮箱地址格式有误',
tips_num: '请填写数字',
tips_chinese: '请填写中文',
tips_mobile: '手机号码格式有误',
tips_idcard: '身份证号码格式有误',
tips_pwdequal: '两次密码不一致',
//正则
reg_email: /^w+@[a-zA-Z0-9]+.[a-zA-Z]{2,4}$/i, //验证邮箱
reg_num: /^d+$/, //验证数字
reg_chinese: /^[u4E00-u9FA5]+$/, //验证中文
reg_mobile: /^1[3458]{1}[0-9]{9}$/, //验证手机
reg_idcard: /^d{14}d{3}?w$/ //验证身份证
};
//不为空则合并参数
if(options)
$.extend(defaults, options);
//获取（文本框，密码框，多行文本框），当失去焦点时，对其进行数据验证
$(":text,:password,textarea", root).each(function () {
$(this).blur(function () {
var _validate = $(this).attr("check"); //获取check属性的值
if (_validate) {
var arr = _validate.split(' '); //用空格将其拆分成数组
for (var i = 0; i < arr.length; i++) {
//逐个进行验证，不通过跳出返回false,通过则继续
if (!check($(this), arr[i], $(this).val()))
return false;
else
continue;
}
}
})
})
//表单提交时执行验证,与上面的方法基本相同，只不过是在表单提交时触发
function _onSubmit() {
isok = true;
$(":text,:password,textarea", root).each(function () {
var _validate = $(this).attr("check");
if (_validate) {
var arr = _validate.split(' ');
for (var i = 0; i < arr.length; i++) {
if (!check($(this), arr[i], $(this).val())) {
isok = false; //验证不通过阻止表单提交，开关false
return; //跳出
}
}
}
});
}
//判断当前对象是否为表单，如果是表单，则提交时要进行验证
if (root.is("form")) {
root.submit(function () {
_onSubmit();
