具体内容请看注释,这里就不多BB了,
奉上代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
|
/// <reference path="vendor/jquery-1.4.1-vsdoc.js" />
///检测表单中的不能为空(.notnull)的验证
/*
时间:2012-6-6
作用:一对form标签下有多个(包括一个)表单需要提交时,使用js准确的判断当前按钮对那些元素做判断
用法:在form标签下 找到当前 表单的容器 给予class="form",当前表单的提交按钮给予 class="check"
需要验证为空的元素给予class="notnull" nullmsg="xx不能为空!"提示,需要进行逻辑判断的表单给予class="need"
判断的类型给予 class="num"(只能是数字) 验证的提示 logicmsg="XX只能是数字"
给予class="errorMessage"显示错误信息块
给予class="warn"显示错误信息
未使用js面向对象编程
逻辑判断,不传入need标识,直接给出正则表达式属性(自定义)regex="/^\d$/" 做出判断
在外部实现
Global.submitCallback button回调函数
Global.confirmCallback confirm回调函数;
需要改进的地方:
暂无
更新时间:2014年12月3日 16:23:22
作者:Amber.Xu
*/
//$(document).ready(
// function () {
// $("form").find(".notnull").bind({
// focus: function () {
// if ($(this).attr("value") == this.defaultValue) {
// $(this).attr("value", "");
// }
// },
// blur: function () {
// if ($(this).attr("value") == "") {
// $(this).attr("value", this.defaultValue);
// }
// }
// });
// }
//);
///*封装一个万能检测表单的方法*/
///event.srcElement:引发事件的目标对象,常用于onclick事件。
///event.fromElement:引发事件的对象源,常用于onmouseout和onmouseover事件。
///event.toElement:引发事件后,鼠标移动到的目标源,常用于onmouseout和onmouseover事件。
function Global() {
var _self = this ;
}
Global.submitCallback = null ;
Global.confirmCallback = null ;
$(document).ready( function () {
//form body
$( "body" ).find( ".form" ).each( function () {
this .onclick = function (e) {
var button = null ;
try {
button = e.srcElement == null ? document.activeElement : e.srcElement;
} catch (e) {
console.log(e.message)
button = document.activeElement;
}
if ($(button).is( ".check" )) {
//alert("提交")
var sub = (checkform( this ) && CheckInputRex( this ) && checkselect( this ) && checkChecked( this ));
if (sub) {
// Call our callback, but using our own instance as the context
Global.submitCallback.call( this , [e]);
}
return sub;
} else if ($(button).is( ".confirm" )) {
//alert("删除")
var sub = confirm($(button).attr( "title" ));
if (sub) {
Global.confirmCallback.call( this , [e]);
}
return sub;
} else {
// //alert("其它")
return true ;
}
}
});
/*检测表单中不能为空的元素*/
function checkform(form) {
var b = true ;
$(form).find( ".notnull" ).each( function () {
if ($.trim($( this ).val()).length <= 0) { //|| $(this).val() == this.defaultValue
// if (this.value != null) {
// $(this).attr("value", "");
// }
//alert($(this).attr("msg"))
$( this ).parents( ".form" ).find( ".warn" ).text($( this ).attr( "nullmsg" ));
$( this ).parents( ".form" ).find( ".errorMessage" ).show();
$( this ).select();
$( this ).focus();
return b = false ;
}
});
if (b == true ) {
$(form).find( ".warn" ).text( "" );
$(form).find( ".errorMessage" ).hide();
}
return b;
}
/*检测表单中必选的下拉列表*/
function checkselect(form) {
var b = true ;
$(form).find( ".select" ).each( function (i) {
var ck = $( this ).find( 'option:selected' ).text();
if (ck.indexOf( "选择" ) > -1) {
$( this ).parents( ".form" ).find( ".warn" ).text($( this ).attr( "nullmsg" ));
$( this ).parents( ".form" ).find( ".errorMessage" ).show();
$( this ).select();
$( this ).focus();
return b = false ;
}
});
return b;
}
/*检测表单中必选的复选框*/
function checkChecked(form) {
var b = true ;
$(form).find( ".checkbox" ).each( function (i) {
var ck = $( this )[0].checked;
if (!ck) {
$( this ).parents( ".form" ).find( ".warn" ).text($( this ).attr( "nullmsg" ));
$( this ).parents( ".form" ).find( ".errorMessage" ).show();
$( this ).select();
$( this ).focus();
return b = false ;
}
});
return b;
}
//检查是否匹配该正则表达式
function GetFlase(value, reg, ele) {
if (reg.test(value)) {
return true ;
}
$(ele).parents( ".form" ).find( ".warn" ).text($(ele).attr( "logicmsg" ));
$(ele).parents( ".form" ).find( ".errorMessage" ).show();
$(ele).focus();
$(ele).select();
return false ; //不能提交
}
function CheckInputRex(form) {
var b = true ;
$(form).find( "input[type='text']" ).each( function () {
if ( typeof ($( this ).attr( "regex" )) == 'string' ) {
if ($.trim($( this ).val()).length > 0 && $( this ).val() != this .defaultValue) {
//当前表单的值
var value = $( this ).attr( "value" ) || $( this ).val();
var regx = eval($( this ).attr( "regex" ));
return b = GetFlase(value, regx, this );
}
}
});
return b;
}
///检查用户输入的相应的字符是否合法
///此方法已废弃
function CheckInput(form) {
var b = true ;
$(form).find( ".need" ).each( function () {
if ($.trim($( this ).val()).length > 0 && $( this ).val() != this .defaultValue) {
//当前表单的值
var value = $( this ).attr( "value" );
//id的值或者name的属性的值如:[name="contact"]
var name = $( this ).attr( "class" );
//检查需要输入的内容是否合法如:联系方式
var len = name.split( " " );
for ( var i = 0; i < len.length; i++) {
switch ($.trim(len[i])) {
///联系方式
case "mobile" :
var reg = /^1\d{10}$/;
return b = GetFlase(value, reg, this );
break ;
///邮箱
case "email" :
var reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
return b = GetFlase(value, reg, this );
break ;
///两次密码是否一致
case "password" :
break ;
case "password2" :
if ($( "#password" ).attr( "value" ) != $( "#password2" ).attr( "value" )) {
$( this ).select(); //获取焦点
$( this ).parents( ".form" ).find( ".warn" ).text($( this ).attr( "logicmsg" ));
$( this ).parents( ".form" ).find( ".errorMessage" ).show();
return b = false ; //不能提交
}
break ;
case "worktel" :
case "hometel" : //家庭电话
var reg = /^\d{8}$/;
return b = GetFlase(value, reg, this );
break ;
case "post" : //邮编
var reg = /^\d{6}$/;
return b = GetFlase(value, reg, this );
break ;
case "bonus" :
case "allowance" :
case "FixedSalary" :
var reg = /^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0|[1-9]\d)$/;
return b = GetFlase(value, reg, this );
break ;
case "identity" :
var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
return b = GetFlase(value, reg, this );
break ;
case "height" :
var reg = /^[1-2][0-9][0-9]$/;
return b = GetFlase(value, reg, this );
break ;
case "qq" :
var reg = /^[1-9][0-9]{4,}$/;
return b = GetFlase(value, reg, this );
break ;
case "begintime" :
case "endtime" :
var reg = /^\d{4}$/;
if (reg.test(value) && (parseInt($( ".endtime" ).val()) > parseInt($( ".begintime" ).val()))) {
return b;
}
$.ligerDialog.alert($( this ).attr( "msg" ))
$( this ).select(); //获取焦点
return b = false ; //不能提交
break ;
case "num" :
var reg = /^\d+$/;
return b = GetFlase(value, reg, this );
break ;
///大陆去香港需要办理往来港澳通行证和香港的签注.因私普通护照号码格式有:
///14/15+7位数,G+8位数;
///因公普通的是:P.+7位数;
///公务的是:S.+7位数 或者
//S+8位数,以D开头的是外交护照
case "postport" : //护照号码
var reg = /^(P\d{7}|G\d{8}|S\d{7,8}|D\d+|1[4,5]\d{7})$/;
return b = GetFlase(value, reg, this );
break ;
case "bankaccount" :
var reg = /^[0-9]{19}$/;
return b = GetFlase(value, reg, this );
break ;
} //switch
} //for
}
});
return b;
}
///此方法已经废弃
});
///单击改变背景颜色
$(document).ready( function () {
var inputs = $( "#top>.c>input" );
$(inputs).each( function () {
this .onclick = function () {
document.getElementById( "main" ).style.backgroundColor = this .name;
//$("#main").backgroundColor = this.name;
}
});
});
|
基本上常用的功能都封装在内了,希望小伙伴们能够喜欢。