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


Posted in Javascript onAugust 17, 2012

先下页面代码:

<!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
今天的课程就到此为止了。
Javascript 相关文章推荐
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
Js 获取Gridview选中行的内容操作步骤
Feb 05 Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
JS模拟自动点击的简单实例
Aug 08 Javascript
js 跳出页面的frameset框架示例介绍
Dec 23 Javascript
js图片自动轮播代码分享(js图片轮播)
May 06 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
jquery插件制作 图片走廊 gallery
Aug 17 #Javascript
jquery插件制作教程 txtHover
Aug 17 #Javascript
IFrame跨域高度自适应实现代码
Aug 16 #Javascript
JSONP 跨域共享信息
Aug 16 #Javascript
js自执行函数的几种不同写法的比较
Aug 16 #Javascript
js三种排序算法分享
Aug 16 #Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 #Javascript
You might like
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
THINKPHP截取中文字符串函数实例代码
2017/03/20 PHP
laravel model 两表联查示例
2019/10/24 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
JS常用算法实现代码
2016/11/14 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
vue模块拖拽实现示例代码
2019/03/09 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
Python去掉字符串中空格的方法
2014/03/11 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
python打开音乐文件的实例方法
2020/07/21 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
运动会入场式解说词
2014/02/18 职场文书
毕业论文评语大全
2014/04/29 职场文书
2015年世界粮食日演讲稿
2015/03/20 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python