/**
* 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. 初遇ping++

    运行遇到的bug java.lang.NoClassDefFoundError: Failed resolution of: Lcom/pingplusplus/android/PingppLog; ...

  2. Unity Chan Advanced

    1. 8X MSAA 2. SMAA 3. ViewSpace Outline 4. Unity Chan Skin 5. Shift Toon Lighting 6. DOF 7. Bloom

  3. hdoj 1050 Moving Tables【贪心区间覆盖】

    Moving Tables Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  4. Oracle中trunc函数、round 函数、ceil函数和floor函数的使用

    Oracle中trunc函数.round 函数.ceil函数和floor函数的使用 1.1trunc函数处理数字 trunc函数返回处理后的数值,其工作机制与ROUND函数极为类似,只是该函数不对指定 ...

  5. Qt 智能指针学习(7种指针)

    Qt 智能指针学习 转载自:http://blog.csdn.net/dbzhang800/article/details/6403285 从内存泄露开始? 很简单的入门程序,应该比较熟悉吧 ^_^ ...

  6. Linux查看系统资源占用

    Linux查看系统资源占用 在系统维护的过程中,随时可能有需要查看 CPU和内存的使用率,并根据相应信息分析系统状况的需求.本文介绍一下几种常见的Linux系统资源查看命令. 1.总体内存占用的查看 ...

  7. JQuery ajax调用asp.net的webMethod

    本文章转载:http://www.cnblogs.com/zengxiangzhan/archive/2011/01/16/1936938.html 在vs2010中,用JQuery ajax调用as ...

  8. OC中类别、扩展、协议与托付

    类别(category)--通过使用类别,我们能够动态地为现有的类加入新方法.并且能够将类定义模块化地分不到多个相关文件里.通常仅仅在类别中定义方法. 类别,接口部分的定义,通常该文件命名为已有&qu ...

  9. 基于Lucene3.5.0怎样从TokenStream获得Token

    通过学习Lucene3.5.0的doc文档,对不同release版本号 lucene版本号的API修改做分析.最后找到了有价值的修改信息. LUCENE-2302: Deprecated TermAt ...

  10. java获取计算机硬件参数

    public class HardWareUtils { /**   *   * 获取主板序列号   *   *   *   * @return   */ public static String g ...