jquery插件制作表单验证实现代码

所属分类：网络编程 / JavaScript 阅读数： 516

收藏 0赞 0分享

先下页面代码：

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