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 相关文章推荐
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
May 14 Javascript
HTML Dom与Css控制方法
Oct 25 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
jquery中常用的函数和属性详细解析
Mar 07 Javascript
JavaScript中window.open用法实例详解
Apr 15 Javascript
json实现添加、遍历与删除属性的方法
Jun 17 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
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操作xml代码
2010/06/17 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
Jquery Ajax请求代码(2)
2011/01/07 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
python定时执行指定函数的方法
2015/05/27 Python
在Django的URLconf中使用命名组的方法
2015/07/18 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
python list删除元素时要注意的坑点分享
2018/04/18 Python
在Python中定义一个常量的方法
2018/11/10 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
Python unittest框架操作实例解析
2020/04/13 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
python程序如何进行保存
2020/07/03 Python
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
直接有效的自我评价
2014/01/11 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
人事科岗位职责范本
2014/03/02 职场文书
保护地球的标语
2014/06/17 职场文书
升国旗演讲稿
2014/09/05 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书