快捷導(dǎo)航

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

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

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

先下頁(yè)面代碼：

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

 
<!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> 

我們定義了一個(gè)form，定義了幾個(gè)輸入框，請(qǐng)注意class屬性，有的是class="required"，說(shuō)明該項(xiàng)是必填項(xiàng)；class="required email"說(shuō)明該項(xiàng)是必填項(xiàng)，并且需要符合email格式。沒(méi)有定義class的輸入框不做驗(yàn)證。下面來(lái)看插件代碼：

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