jquery外掛程式製作 表單驗證實作程式碼_jquery

前下頁碼：

複製代碼代碼如下：

標題>



$(document).ready(function () {
$('.formToCheck').formCheck();
});
腳本>

表格
{
寬度：300px;
}
標籤
{
位置：絕對；
}
輸入：not(. submit)，文字區域
{
margin-left: 100px;
寬度：200px;
}
.提交
{
margin-left: 100px
; }
.error
{
邊框：1px 純紅色；
}
風格>
頭>

;
簡單的形式圖例>

* 名字標籤>

姓氏標籤>

* 電子郵件標籤>
>

* 註解標籤>
>

* 電子郵件標籤>

表>
身體>

我們定義了一個表格，定義了幾個輸入框，請注意class屬性，有的是class="required"，說明項目是必填項；class="required email"說明該項是必填項，並且需要符合email格式。沒有定義class的輸入框不做驗證。以下檢視外掛程式碼：

複製程式碼 程式碼如下：

(function ($) {
$.fn.formCheck = function (options) {
var defaults = {
errorClass: 'error '
};
var options = $.extend(defaults, options);
var options = $.extend(defaults, options);
var options = $.extend(defaults, options);
return this.each(function () {
var form = $(this);
//如果不是來自表單，直接回傳不做任何動作
if (!form.is('form' )) {
return;
}
//只有當form表單提交的時候，我們才可以做
form.submit(function () {
var errorFlag = false;
//取得所有輸入控制項中的表單，逐一處理
$(':input', this). every(function (index, item) {
//取得目前物件
var element = $(item);
//刪除樣式
element.removeClass(options.errorClass);
//必填項驗證，value值不能為空
if (element.hasClass('required ') && element.val().length == 0) {
errorFlag = true; .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 errorFlag = true;
element.addClass(options.errorClass);
}
});
返回！ errorFlag;
});
});
};
})(jQuery);

示範下載位址：jQuery.plugin.formcheck
今天的課程就到此狀況了。