bootstrap.validate.js
7.05 KB
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
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
/**
* 给一个输入框加上验证信息
* 作者:黄平
* 日期:2016-04-18
*/
(function($) {
$.fn.validate = function(options, param) {
var self = this;
if (typeof (options) == "string") {
var method = $.fn.validate.methods[options];
if (method){
return method.call(this, param);
}
}
return this.each(function() {
var opt = $.extend({}, $.fn.validate.defaults, options);
self.data("validate", opt);
_createValidate(self);
});
};
/**
* 创建验证信息
*/
function _createValidate(jq) {
var opt = jq.data("validate");
var textValue = jq.val();
jq.attr({
"data-toggle" : "tooltip",
"data-placement" : opt.tipPosition,
"data-trigger" : "manual",
enableValidation : "true"
});
//开始验证
_validataOnEvent(jq);
}
/**
* 根据事件,来验证
*/
function _validataOnEvent(jq) {
var opt = jq.data("validate");
var textValue = jq.val();
//text失去焦点时验证
if (opt.validateOnBlur === true) {
jq.blur(function() {
window.setTimeout(function() {
jq.validate("validate");
}, 300);
//_validateText(jq);
});
}
//获取焦点时,取消弹出信息
jq.focus(function() {
_setDivStyle(jq, true);
jq.tooltip("hide");
});
}
/**
* 销毁
*/
function _destory(jq) {
jq.tooltip("destroy");
}
/**
* 验证信息
*/
function _validateText(jq) {
var opt = jq.data("validate");
var textValue = jq.val();
//开始验证时,触发
if (opt.onBeforeValidate) {
opt.onBeforeValidate(textValue);
}
var message = "", result = undefined;
if (jq.attr("enableValidation") == "false") {
result = true;
} else {
//输入框为空时
if (opt.required === true && textValue == "") {
message = opt.missingMessage;
result = false;
} else {
if (opt.validType) {
//开始验证
if ($.type(opt.validType) === "string") {
//string类型
result = _validataString(textValue, opt.validType);
} else if ($.type(opt.validType) === "array") {
//array类型
for (var i = 0; i < opt.validType.length; i++) {
result = _validataString(textValue, opt.validType[i]);
if (result !== true) {
break;
}
}
} else if ($.type(opt.validType) === "function") {
//function类型
result = opt.validType(textValue);
}
if (!_checkResult(result)) {
//验证结果未通过,则显示提示
message = $.type(result) === "string" ? result : opt.invalidMessage;
}
}
}
_addEvent(jq);
}
if (!_checkResult(result)) {
_destory(jq);
//bt的bug,需要延迟一段时间再显示,不然会有问题
window.setTimeout(function() {
jq.tooltip({
title : message,
delay : {
show : 500,
hide : 500
}
});
jq.tooltip("show");
}, 500);
//jq.focus();
} else {
jq.tooltip("hide");
}
//当验证完成后,设置外面框的样式
_setDivStyle(jq, result);
//验证完成时,触发
if (opt.onAfterValidate) {
opt.onAfterValidate(textValue, result);
}
return _checkResult(result);
}
/**
* 返回值为true或者未有数据返回时,都认为验证通过
*/
function _checkResult(result) {
return result === true || result === undefined;
}
/**
* 当验证失败时,设置外面框的样式
*/
function _setDivStyle(jq, result) {
var groupDiv = jq.parent();
if (!groupDiv) {
return;
}
/*groupDiv = groupDiv.parent();
if (!groupDiv) {
return;
}*/
if (_checkResult(result)) {
groupDiv.removeClass("has-error");
} else {
groupDiv.addClass("has-error");
}
}
/**
* string或array类型的验证
*/
function _validataString(textValue, validType) {
var param = "";
if (validType.indexOf("[") > 0) {
param = validType.substring(validType.indexOf("["));
validType = validType.substring(0, validType.indexOf("["));
}
return $.fn.validate.defaults.rules[validType](textValue, eval(param));
}
/**
* 添加事件
*/
function _addEvent(jq) {
var opt = jq.data("validate");
jq.on("show.bs.tooltip", function(e) {
if (opt.onBeforeShow) {
opt.onBeforeShow.call(jq);
}
});
jq.on("shown.bs.tooltip", function(e) {
if (opt.onAfterShow) {
opt.onAfterShow.call(jq);
}
});
jq.on("hide.bs.tooltip", function(e) {
if (opt.onBeforeHide) {
opt.onBeforeHide.call(jq);
}
});
jq.on("hidden.bs.tooltip", function(e) {
if (opt.onAfterHide) {
opt.onAfterHide.call(jq);
}
});
}
$.fn.validate.methods = {
/**
* 验证输入框
*/
validate : function() {
return this.each(function() {
_validateText($(this));
});
},
/**
* 返回验证结果
*/
isValid : function() {
return _validateText($(this));
},
/**
* 开启验证
*/
enableValidation : function() {
$(this).attr("enableValidation", "true");
},
/**
* 关闭验证
*/
disableValidation : function() {
$(this).attr("enableValidation", "false");
}
};
//事件
$.fn.validate.event = {
onBeforeShow : function() {},
onAfterShow : function() {},
onBeforeHide : function() {},
onAfterHide : function() {},
onBeforeValidate : function(textValue) {},
onAfterValidate : function(textValue, result) {}
};
$.fn.validate.defaults = $.extend({}, $.fn.validate.event, {
required : false, //是否必填
/**
* 使用默认或自定义的验证方法
* string|array|function
* string 指定一个默认或自定义的验证方法
* array 指定多个默认或者自定义验证方法
* function 传入验证框的内容,返回true,则验证通过,返回string,则验证不通过,并且把该string作为提示消息
*/
validType : null,
missingMessage : "该值为必填项", //该值为空时并且required=true的提示
invalidMessage : "", //验证失败时,并且验证的函数只返回false的时候显示
tipPosition : "right", //提示框的位置('left','right','top','bottom')
validateOnBlur : true //是否失去焦点时验证
});
/**
* 验证框的,验证方法
* 返回为true或者undefined,则表示验证通过;其余都是失败
* 返回字符串,则该值会显示在错误提示里面
*/
$.fn.validate.defaults.rules = {
/**
* 最小长度
*/
minlength : function(value, param) {
if (value.length < param[0]) {
return "长度必须大于" + param[0];
}
},
/**
* 最大长度
*/
maxlength : function(value, param) {
if (value.length > param[0]) {
return "长度超过了" + param[0];
}
},
/**
* 设置最大和最小长度
*/
length : function(value, param) {
var result = $.fn.validate.defaults.rules.minlength(value, [param[0]]);
if (!_checkResult(result)) {
return result;
}
result = $.fn.validate.defaults.rules.maxlength(value, [param[1]]);
if (!_checkResult(result)) {
return result;
}
},
/**
* 验证url
*/
url : function(value, param) {
if (value == "") {
return true;
}
var reg = /^http[s]{0,1}:\/\/.+$/;
if (!reg.test(value)) {
return "url格式不正确";
}
}
};
})(jQuery);