jquery插件制作 -- 3.表单验证
今天的内容是关于表单验证插件的制作。表单验证控件实现的主要功能是，当表单提交的时候检查必填项是否正确填写，同时根据需要验证输入信息是否符合规范。
先下页面代码：
<!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> <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的输入框不做验证。下面来看插件代码：
(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);
demo下载地址：jQuery.plugin.formcheck.zip
今天的课程就到此为止了。
