/**
* Created by Administrator on 2015/4/2.
* 时间:2012-6-6
作用:一对form标签下有多个(包括一个)表单需要提交时,提交当前作用域中的表单项做出相应的验证
处理问题:一个aspx页面下只能有一个form表单(加了runat='server')
约定:当前body元素下可以有多个form表单:凡是class='form'的元素都视为一个表单元素,此“表单”元素下有相应的表单项
其中包含一个含有class='check'的按钮,当点击此按钮的时候会首先验证表单项中含有class='notnull'的表单项,其次验证表单项中含有regex='/^$/'的
表单项,如果验证失败,会抛出相应的有好提示nullmsg='不能为空' 或 logicmsg='只能是数字'。
每个表单项验证成功之后class='check'的按钮会触发一个名为 $.GlobalCallBack.submitCallback的回调函数。继而完成和后端的交互。 用法:
calss='notnull' 元素不能为空、勾选(复选框)
class='select' 必选(下拉框)
class='nullmsg' 验证失败之后的友好提示
regex='/^$/' 当前需要验证的正则
logicmsg='邮箱格式错误' 当前正则验证失败之后的友好提示
配置了指定的errorElement(错误提示元素),就会在页面上给出友好提示 Global.submitCallback button回调函数
Global.confirmCallback confirm回调函数;
需要改进的地方:

24 作者:layen.Xu
*/
;
(function ($) {
$.GlobalCallBack = {
//用于.check按钮的回调
submitCallback: null,
//用于.confirm按钮的回调
confirmCallback: null
};
$.fn.Action = function (options) {
var defaults = {
body: 'body',
formElement: '.form',
errorElement: null
}
var opts = $.extend({}, defaults, options);
var operating = {
///e:当前事件参数 form:当前“表单” _Enter:是否点击了回车键
main: function (e, form, _Enter) {
var button = null;
var action = this;
try {
button = e.srcElement == null ? document.activeElement : e.srcElement;
} catch (e) {
console.log(e.message)
button = document.activeElement;
}
if ($(button).is(".check") || _Enter) {
//alert("提交")
var sub = (action.checkform(form) && action.CheckInputRex(form) && action.checkselect(form) && action.checkChecked(form));
if (sub) {
// Call our callback, but using our own instance as the context
//GlobalCallBack.submitCallback.call(form, [e]);
$.GlobalCallBack.submitCallback.call(form, e);
} else
return sub;
} else if ($(button).is(".confirm")) {
//alert("删除")
var sub = confirm($(button).attr("title"));
if (sub) {
//GlobalCallBack.confirmCallback.call(form, [e]);
$.GlobalCallBack.confirmCallback.call(form, e);
} else
return sub;
} else {
// //alert("其它")
return true;
}
},
///检测表单为空项 form当前表单
checkform: function (form) {
var b = true;
var action = this;
$(form).find(".notnull").each(function () {
if ($.trim($(this).val()).length <= 0 || $.trim($(this).val()) == $.trim($(this).attr("placeholder"))) {//|| $(this).val() == this.defaultValue
return b = action.tip(this, 'nullmsg');
}
});
if (b == true) {
$(form).find(opts.errorElement).text("");
$(form).find(opts.errorElement).hide();
}
return b;
},
//检测表单中必选的下拉列表 form当前表单
checkselect: function (form) {
var b = true;
var action = this;
$(form).find(".select").each(function (i) {
var ck = $(this).find('option:selected').text();
if (ck.indexOf("选择") > -1) {
return b = action.tip(this, 'nullmsg');
}
});
if (b == true) {
$(form).find(opts.errorElement).text("");
$(form).find(opts.errorElement).hide();
}
return b;
},
//检测表单中必选的复选框 form当前表单
checkChecked: function (form) {
var b = true;
            var action = this;
$(form).find(".checkboxReq").each(function (i) {
var ck = $(this)[0].checked;
if (!ck) {
return b = action.tip(this, 'nullmsg');
}
});
if (b == true) {
$(form).find(opts.errorElement).text("");
$(form).find(opts.errorElement).hide();
}
return b;
},
//检查是否匹配该正则表达式 value:输入的值 reg:正则 ele:当前项
GetFlase: function (value, reg, ele) {
var action = this;
if (reg.test(value)) {
return true;
}
return action.tip(ele, 'logicmsg');
},
//检查正则 form当前表单
CheckInputRex: function (form) {
var action = this;
var b = true;
$(form).find("input[type='text'],input[type='password']").each(function () {
console.log($(this).attr("regex"))
if (typeof ($(this).attr("regex")) == 'string') {
if ($.trim($(this).val()).length > 0 && $.trim($(this).val()) != $.trim($(this).attr("placeholder"))) {
//当前表单的值
var value = $(this).attr("value") || $(this).val();
var regx = eval($(this).attr("regex"));
return b = action.GetFlase(value, regx, this);
}
}
});
return b;
},
//提示
tip: function (ele, attr) {
if (opts.errorElement) {
$(ele).parents(opts.formElement).find(".error").text($(ele).attr(attr));
$(ele).parents(opts.formElement).find(".error").show();
} else {
alert($(ele).attr(attr));
}
$(ele).select();
$(ele).focus();
return false;
}
};
return $(opts.body).find(opts.formElement).each(function () {
var form = this;
this.onclick = function (e) {
return operating.main(e, form);
}
if($(opts.formElement).length==1){
document.onkeydown = function (eve) {
var e = eve || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 13) {
return operating.main(e, form, true);
}
}
} });
}
}(jQuery));

HTML代码

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://www.ac.shell.com/static/js/vendor/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="red.js"></script>
<script type="text/javascript">
$(function(){
$(document).Action({errorElement:'.error'});
}); $.GlobalCallBack.submitCallback = function (e) {
e = e || window.event;
var obj = e.srcElement ? e.srcElement : e.target;
alert(obj.id)
} </script>
</head>
<body>
<div class="form">
数字:<input type="text" regex="/^\d+$/" logicmsg="只能输入数字" class="notnull" nullmsg="不能为空"/><br/>
<input type="button" class="check" id="btnClick" value="Click Me"/>
<div class="error">
</div>
</div>
<br/><br/> <div class="form">
选择:<select name="select" class="select" nullmsg="请选择" id="select">
<option value="0">请选择</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br/><br/>
<input type="button" class="check" id="btnSelect" value="Click Me2"/> <div class="error">
</div>
</div>
</body>
</html>

javascript--自己用的插件的更多相关文章

  1. 【精心推荐】几款极好的 JavaScript 文件上传插件

    文件上传功能作为网页重要的组成部分,几乎无处不在,从简单的单个文件上传到复杂的批量上传.拖放上传,需要开发者花费大量的时间和精力去处理,以期实现好用的上传功能.这篇文章向大家推荐几款很棒的 JavaS ...

  2. 用Javascript编写Chrome浏览器插件

    原文:http://homepage.yesky.com/62/11206062.shtml 用Javascript编写Chrome浏览器插件 2010-04-12 07:30 来源:天极网软件频道 ...

  3. javascript跟随滚动效果插件代码(javascript Follow Plugin)

    这篇文章介绍了javascript跟随滚动效果插件代码(javascript Follow Plugin),有需要的朋友可以参考一下Js 跟随滚动效果插件支持定义多个跟随ID,采用css fixed属 ...

  4. 第一百三十八节,JavaScript,封装库--插件

    JavaScript,封装库--插件 库主要是用来封装一般JavaScript的常规操作代码,而拖拽这种特效代码属于功能性代码,并不是必须的,所以这种类型的代码,我们建议另外封装,在需要的时候作为插件 ...

  5. 10个强大的Javascript表单验证插件推荐

    创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScri ...

  6. 几款极好的 JavaScript 文件上传插件

    文件上传功能作为网页重要的组成部分,几乎无处不在,从简单的单个文件上传到复杂的批量上传.拖放上传,需要开发者花费大量的时间和精力去处理,以期实现好用的上传功能.这篇文章向大家推荐几款很棒的 JavaS ...

  7. 推荐12款实用的 JavaScript 书页翻转效果插件

    Flipbooks(书页)或者页面翻转已成为在网页设计中最流行的交互动画之一.他们可以用在 Flash,网页或者在线杂志中.使用书页动画或者页面翻转的网页设计效果方便人们展示他们的产品,作品或者其它内 ...

  8. 14个华丽的javascript图表资源和插件

    最近我分享一许多css/jquery 有用的资源,这里我将介绍一些用于构建华丽图表的javascript资源和插件,图表是展示数据最有效的方式. 建立一张图表有很多不同的方法,比如falsh.java ...

  9. 10个精选的颜色选择器Javascript脚本及其jQuery插件

     Color picker即颜色选择器使我们在web开发中可能经常用到的组件,今天我们特意精选了10个超酷的颜色选择器实现,其中包括了javascript脚本 实现及其传说中的jQuery插件实现 ...

  10. 阿里云oss视频上传不能在线播放,js,javascript,在线播放器,插件

    网页视频播放插件 发现阿里云oss储存,上传了视频不能在线播放. 解决方法:使用插件播放即可解决. <html> <head> <meta charset="u ...

随机推荐

  1. 单位分配的IP地址和电脑主机绑定了,我想用设置一个无线路由器,让我的笔记本电脑和手机都能上网?

    单位分配的IP地址和电脑主机绑定了,我想用设置一个无线路由器,让我的笔记本电脑和手机都能上网?     配一个无线路由器就可以实现,将电脑IP配置成自动获取,找条网线一头插路由LAN口(路由器上有标明 ...

  2. IOS引用的静态库里包含category文件出现“unrecognized selector”的解决办法

    来自链接:http://blog.csdn.net/ccf0703/article/details/8279187 针对静态库工程中的Category,在被其他工程引入的时候,会出现selector ...

  3. MongoDB基础知识 01

    MongoDB基础知识  1. 文档  文档是MongoDB中的数据的基本单元,类似于关系型数据库管理系统的行. 文档是键值对的一个有序集.通常包含一个或者多个键值对. 例如: {”greeting& ...

  4. disconf实践(一)

    公司目前的应用基本采用分布式部署,通过F5进行集群管理.分布式应用带来的好处是,随着流量的增加,可以快速扩展应用节点,分摊压力.分布式也会带来一定的挑战,譬如配置文件管理.如果某个配置要修改,那么所有 ...

  5. Javascript诞生与历史

    基本常识 Brendan Eich在1995年4月入职Netscape Communications Corporation(网景通信公司).并于1995年5月用10天时间发明了Javascript. ...

  6. WebForm Repeater的事件、后天数据展示--2017年1月8日

    Repeater的Command操作 1.ItemCommand事件 :在Repeater中所有能触发事件的控件,都会来触发这一个事件 CommandName : 判断点击的是什么按钮,e.Comma ...

  7. java poi操作excel 添加 锁定单元格保护

    Excel的book保护是很常用的,主要是不想让别人修改Excel的时候用.这样能够避免恶意随便修改数据,提高数据的可信度. 下面介绍JAVA POI来实现设置book保护: 使用HSSFSheet类 ...

  8. js 传参数

    引用js实现传参数,然后在js文件里面动态加载东西,比如传递参数然后动态加载皮肤颜色,而我为了实现多语言,一般人家传递参数是为了区分版本用的还有清除js缓存问. <script src=&quo ...

  9. Cocos2d-x 3.0 红孩儿私家必修 - 第二章 cpp-empty-test

    上一章我们讲到说曾经的HelloWorld演示更名为cpp-empty-test. 本章我们来分析一下 执行程序,我们能够看到熟悉的HelloWorld程序:与之前cocos2d-x2.x版本号的He ...

  10. shell之“>/dev/null 2>&1” 详解(转)

    今天在自己的一个技术群中又被问道了这么一个问题,于是又通俗的解释了一下,做个记录,大家看看解释是否清楚! shell中可能经常能看到:>/dev/null 2>&1 命令的结果可以 ...