jquery插件制作 -- 3.表单验证
生活随笔
收集整理的這篇文章主要介紹了
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
今天的課程就到此為止了。
轉載于:https://www.cnblogs.com/softlover/archive/2012/08/15/2639681.html
總結
以上是生活随笔為你收集整理的jquery插件制作 -- 3.表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《人生不设限》力克的生命故事
- 下一篇： Hibernate之Hello Worl