快捷導(dǎo)航

jquery插件制作表單驗證實現(xiàn)代碼

更新時間：2012年08月17日 15:33:11 作者：

今天的內(nèi)容是關(guān)于表單驗證插件的制作。表單驗證控件實現(xiàn)的主要功能是，當(dāng)表單提交的時候檢查必填項是否正確填寫，同時根據(jù)需要驗證輸入信息是否符合規(guī)范

先下頁面代碼：

 
<!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的輸入框不做驗證。下面來看插件代碼：

復(fù)制代碼代碼如下:

 
(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; 
} 
//只有當(dāng)form表單提交的時候，我們才做驗證 
form.submit(function () { 
var errorFlag = false; 
//獲取表單里面所有的input控件，逐一進行處理 
$(':input', this).each(function (index, item) { 
//獲取當(dāng)前對象 
var element = $(item); 
//移除樣式 
element.removeClass(options.errorClass); 
//必填項驗證，value值不能為空 
if (element.hasClass('required') && element.val().length == 0) { 
errorFlag = true; 
element.addClass(options.errorClass); 
} 
//數(shù)字驗證 
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); 
} 
//驗證數(shù)字長度 
var num = this.className.match(/min(\d+)/i); 
if (num && element.val().length < num[1]) { 
errorFlag = true; 
element.addClass(options.errorClass); 
} 
}); 
return !errorFlag; 
}); 
}); 
}; 
})(jQuery); 