/*描述：基于jquery的表单验证插件。*/(function ($) {$.fn.checkForm = function (options) {var root = this; //将当前应用对象存入rootvar 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;elsecontinue;}}})})//表单提交时执行验证,与上面的方法基本相同，只不过是在表单提交时触发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; //验证不通过阻止表单提交，开关falsereturn; //跳出}}}});}//判断当前对象是否为表单，如果是表单，则提交时要进行验证if (root.is("form")) {root.submit(function () {_onSubmit();return isok;})}//验证方法var check = function (obj, _match, _val) { //根据验证情况，显示相应提示信息，返回相应的值switch (_match) {case ‘required‘:return _val ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_required, false);case ‘email‘:return chk(_val, defaults.reg_email) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_email, false);case ‘num‘:return chk(_val, defaults.reg_num) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_num, false);case ‘chinese‘:return chk(_val, defaults.reg_chinese) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_chinese, false);case ‘mobile‘:return chk(_val, defaults.reg_mobile) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_mobile, false);case ‘idcard‘:return chk(_val, defaults.reg_idcard) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_idcard, false);case ‘pwd1‘:pwd1 = _val; //实时获取存储pwd1值return true;case ‘pwd2‘:return pwdEqual(_val, pwd1) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_pwdequal, false);default:return true;}}//判断两次密码是否一致(返回bool值)var pwdEqual = function(val1, val2) {return val1 == val2 ? true : false;}//正则匹配(返回bool值)var chk = function (str, reg) {return reg.test(str);}//显示信息var showMsg = function (obj, msg, mark) {$(obj).next("#errormsg").remove();//先清除var _html = "<span id=‘errormsg‘ style=‘font-size:13px;color:gray;background:url(" + defaults.img_error + ") no-repeat 0 -1px;padding-left:20px;margin-left:5px;‘>" + msg + "</span>";if (mark)_html = "<span id=‘errormsg‘ style=‘font-size:13px;color:gray;background:url(" + defaults.img_success + ") no-repeat 0 -1px;padding-left:20px;margin-left:5px;‘>" + msg + "</span>";$(obj).after(_html);//再添加return mark;}}})(jQuery);先来说一说实现原理：首先定义好正则，和相应的提示信息，加上自定义check属性，然后获取check属性的值，多个值用空格分开。利用split()将其拆分为数组，在逐个调用check()方法进行验证。之后通过验证的返回值来确定显示的信息。这里有两个验证是比较特别的，就是：1.验证是否为空 （required）2.两次密码是否一致 （pwd2）这两个都没有用到正则，因为根本就用不上。 两次密码是否一致 ，单独写了个方法 pwdEqual();插件里的验证正则我只写了几个 ，如果不够用可以自行扩展添加。扩展只需3步：1.添加正则，2.添加相应提示信息，3.check()方法中添加相应 case 处理jquery实现表单验证简单实例演示插件使用说明：1.给表单下要进行验证的文本框，密码框 ，多行文本框加上自定义check属性2.多个格式验证用空格间隔，如（同时验证必填和邮箱）： check="required email"3.如果要验证两次密码是否一致，则pwd1和pwd2一起使用，如下图：pwd1存储第一次输入的值，pwd2存储第二次输入的值，如果你只用pwd1还好，但如果只用了pwd2，则验证是始终无法通过的。下面给出DEMO示例代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>表单验证插件</title></head><body><form id="myform" method="post" action="success.html"><ul><li>邮箱：<input type="text" name="email" check="required email" /></li><li>密码：<input type="password" check="required pwd1" /></li><li>确认密码：<input type="password" check="required pwd2" /></li><li>手机：<input type="text" name="num" check="required mobile" /></li><li>数字：<input type="text" name="num" check="required num" /></li><li>地址：<textarea cols="5" rows="5" check="required"></textarea></li><li>不加check验证的文本框：<input type="text" name="num" /></li></ul><input type="submit" value="提交" /></form><script src="js/jquery-1.4.4.min.js" type="text/javascript"></script><script src="js/jquery.similar.checkForm.js" type="text/javascript"></script><script type="text/javascript">$("#myform").checkForm();</script></body></html>转自a5源码 http://down.admin5.com/info/2015/1124/129900.html
jquery实现表单验证简单实例演示
原文地址：https://www.cnblogs.com/dahei96/p/9456404.html