validate.js
3.55 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
/**
* 验证组件
* 根据传入规则和信息，验证元素的值是否符合规则，给出相应的信息提示。
* 使用：
* 1、$(parent).validate(param)--parent为验证元素的父元素，验证元素需要添加requireded类
* 2、参数param:{
* value: '', //需要验证的值
rules: [], //规则数组
style: {}, //错误提示信息的样式
errorMsg: '', //无rules时，想直接显示错误信息使用
isShowError: false, //直接显示错误提示信息errorMsg
isHideError: false //隐藏错误提示信息
}
*/
define('validate', ['components/common', 'jquery', 'utils'], function () {
var eles = 'input.requireded,select.requireded,textarea.requireded';
var _Validate = function (ele, settings) {
this.ele = ele;
this.rules = settings.rules;
this.style = settings.style;
}
_Validate.prototype = {
bindEvent: function () {
var that = this;
$(this.ele).off('change.validate', eles)
.on('change.validate', eles, function () {
var $this = $(this);
var value = $this.val();
that.valid(value);
})
},
valid: function (value) {
value = value ? value.replace(/(\s*$)/g, "") : '';
var isValid = true;
var _u = require('utils');
if (this.rules.length) {
var rule = '';
var msg = '';
for (var i = 0; i < this.rules.length; i++) {
rule = this.rules[i].rule ? this.rules[i].rule : /[^\s]+/; //默认规则“非空”
msg = this.rules[i].msg ? this.rules[i].msg : '';
var ruleReg = new RegExp(rule);
if (!ruleReg.test(value) && !(_u.isBoolean(value) && value)) { ////value值boolean型且为true时，默认是正确的
isValid = false;
this.createError(msg);
break;
}
}
} else {
this.hideError();
}
if (isValid) {
this.hideError();
}
},
createError: function (msg) {
var style = this.style;
var $container = $(this.ele);
var errorExist = $container.children('.error-tip').length;
if (!errorExist) {
$container.addClass('has-error');
$container.append('<span class="error-tip">\
<i class="iconfont icon-warn main-color"></i>\
<span class="tip-msg">' + msg + '</span>\
<span class="clean-error" >×</span>\
</span>');
var that = this;
$container.children('.error-tip').css(style).find('.clean-error').on('click',function () {
that.hideError();
return false;
});
} else {
$container.addClass('required has-error')
.children('.error-tip').show().css(style)
.children('.tip-msg').html(msg);
}
},
showError:function(msg){
this.createError(msg);
},
hideError:function(){
$(this.ele).removeClass('has-error').children('.error-tip').hide();
}
}
$.fn.validate = function (settings) {
var defaultSetting = {
rules: [],
style: {},
errorMsg:'',
isShowError:false,
isHideError:false
};
var cfg = $.extend(defaultSetting, settings);
var _validate = new _Validate(this, cfg);
var value = cfg.value !== undefined ? cfg.value : $(_validate.ele).find('input.requireded,select.requireded,textarea.requireded').eq(0).val();
if(cfg.isShowError){
return _validate.showError(cfg.errorMsg);
}
if(cfg.isHideError){
return _validate.hideError();
}
!$(this).children('.error-tip').length && _validate.bindEvent();
_validate.valid(value);
}
});