今天的內容是關於表單驗證插件的制作。表單驗證控件實現的主要功能是，當表單提交的時候檢查必填項是否正確填寫，同時根據需要驗證輸入信息是否符合規范。
先下頁面代碼：
<!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
今天的課程就到此為止了。