今天的內容是關於表單驗證外掛程式的製作。表單驗證控制項實現的主要功能是，當表單提交的時候檢查必填項是否正確填寫，同時根據需要驗證輸入資訊是否符合規範。
先下頁面代碼：
<!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
今天的課程就到此為止了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
