jquery插件制作 jquery表单验证代码分享
发布时间：2015-11-12 编辑：jiaochengji.com
本文介绍下，开发制作jquery插件的一个例子，通过实现一个表单验证代码，来学习在jquery中制作插件的方法，有需要的朋友作个参考吧。
表单验证控件实现的主要功能：
当表单提交的时候检查必填项是否正确填写，同时根据需要验证输入信息是否符合规范。
1，页面代码部分：
<!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>jquery表单验证插件-www.jbxue.com</title> <script type="text/javascript" src="Scripts/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="Scripts/jquery.formCheck.js"></script> <script type="text/javascript"> $(document).ready(function () { $('.formToCheck').formCheck(); }); </script> <style type="text/css"> form { width: 300px; } label { position: absolute; } input:not(.submit), textarea { margin-left: 100px; width: 200px; } .submit { margin-left: 100px; } .error { border:1px solid red; } </style> </head> <body> <form class="formToCheck" id="formToCheck" method="get" action="#"> <fieldset> <legend>a simple form</legend> <p> <label for="fname"> * first name</label> <input id="fname" class="required" name="fname" /> </p> <p> <label for="lname"> last name</label> <input id="lname" name="lname" /> </p> <p> <label for="email"> * email</label> <input id="email" name="email" class="required email" /> </p> <p> <label for="comment"> * comment</label> <input id="comment" name="comment" class="required" /> </p> <p> <label for="email"> * email</label> <input id="submit" type="submit" class="submit" value="submit" /> </p> </fieldset> </form> </body> </html>以上定义了一个form，定义了几个输入框。
注意class属性：
class="required"，说明该项是必填项；
class="required email"说明该项是必填项，并且需要符合email格式。
没有定义class的输入框不做验证。
2，插件代码：
(function ($) { $.fn.formCheck = function (options) { var defaults = { errorClass: 'error' }; var options = $.extend(defaults, options); return this.each(function () { var form = $(this); //如果不是from表单，直接返回不做任何操作 if (!form.is('form')) { return; } //只有当form表单提交的时候，我们才做验证 form.submit(function () { var errorFlag = false; //获取表单里面所有的input控件，逐一进行处理 $(':input', this).each(function (index, item) { //获取当前对象 var element = $(item); //移除样式 element.removeClass(options.errorClass); //必填项验证，value值不能为空 if (element.hasClass('required') && element.val().length == 0) { errorFlag = true; element.addClass(options.errorClass); } //数字验证 if (element.hasClass('number') && element.val().length > 0 && !/^\d+$/.test(element.val())) { errorFlag = true; element.addClass(options.errorClass); } //email验证 if (element.hasClass('email') && element.val().length > 0 && !/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(element.val())) { errorFlag = true; element.addClass(options.errorClass); } //验证数字长度 var num = this.className.match(/min(\d+)/i); if (num && element.val().length < num[1]) { errorFlag = true; element.addClass(options.errorClass); } }); return !errorFlag; }); }); }; })(jQuery);您可能感兴趣的文章：
juery validate 验证注册表单的例子
表单验证插件 jQuery formValidator
jQuery表单验证插件 jqValidate
jQuery验证码插件 Ajax Fancy Capcha
jquery插件制作 jquery表单验证代码分享
jQuery表单验证插件 jQuery.validity
jQuery表单美化和验证插件 Formly
jQuery表单插件 jFormer
jQuery表单验证及初始化插件 Koo.js
jQuery的插件列表(2010-1-25更新)
[关闭]