jquery插件制作 表单验证实现代码
更新时间：2012年08月17日 15:33:11 作者：
今天的内容是关于表单验证插件的制作。表单验证控件实现的主要功能是，当表单提交的时候检查必填项是否正确填写，同时根据需要验证输入信息是否符合规范
先下页面代码：
<!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
今天的课程就到此为止了。
复制代码 代码如下:
<!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
今天的课程就到此为止了。
您可能感兴趣的文章:
- jquery validate.js表单验证的基本用法入门
- jquery表单验证使用插件formValidator
- 基于Bootstrap+jQuery.validate实现Form表单验证
- Jquery练习之表单验证实现代码
- jQuery 表单验证插件formValidation实现个性化错误提示
- Jquery插件easyUi表单验证提交(示例代码)
- jquery 实现表单验证功能代码(简洁)
- jQuery实现用户注册的表单验证示例
- jQuery表单验证插件formValidator(改进版)
- jValidate 基于jQuery的表单验证插件
- jquery 最简单易用的表单验证插件
- jquery表单验证插件（jquery.validate.js）的3种使用方式
- jQuery表单验证简单示例
相关文章
下面小编就为大家带来一篇JQuery实现DIV其他动画效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
下面小编就为大家带来一篇jquery html动态添加的元素绑定事件详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了jQuery简单实现日历的方法,涉及jQuery操作日期的相关技巧,比较简单实用,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了jQuery控制frames及frame页面JS的方法,涉及jQuery针对页面元素的判定及frame框架的操作技巧,需要的朋友可以参考下2016-03-03
这篇文章主要介绍了jQuery中unwrap()方法用法,实例分析了unwrap()方法的定义、功能及移除匹配元素父元素的使用技巧,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了网站加载第三方CDN，如果jQuery库不成功则加载本地的jquery的实现代码,需要的朋友可以参考下2018-05-05
基于LayUI分页和LayUI laypage分页的使用示例
本篇文章主要介绍了基于LayUI分页和LayUI laypage分页的使用示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
我们用一个语句就让下面五个div显示成功，具体实现如下，感兴趣的朋友可以参考下2013-10-10
jquery滑块（slider）允许用户从一个有限的范围内选择一个数值。当沿着轨道移动滑块控件时，将显示一个表示当前值的提示框，用户可通过设置它的属性来自定义滑块。2015-04-04
表单验证功能在项目中经常会用得到，接下来给大家介绍使用jquery实现智能表单验证功能实例代码，对jquery实现表单验证功能相关资料感兴趣的朋友一起学习吧2016-03-03
最新评论