拥有一个属于自己的javascript表单验证插件

1
2
3
4
.failvalid
{
 border: solid 2px red !important;
}

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
/**
* 验证插件
*/

SimpoValidate = {
 //验证规则
 rules: {
 int: /^[1-9]d*$/,
 number: /^[+-]?d*.?d+$/
 },

 //初始化
 init: function () {
 $("span[class*='valid']").each(function () { //遍历span
 var validSpan = $(this);
 var to = validSpan.attr("to");
 var target;
 if (to) {
 target = $("input[name='" + to + "'],select[name='" + to + "'],textarea[name='" + to + "']");
 } else {
 var target = validSpan.prev();
 }
 if (target) {
 target.blur(function () {
  SimpoValidate.validOne(target, validSpan);
 });
 }
 });
 },

 //验证全部，验证成功返回true
 valid: function () {
 var bl = true;

 $("span[class*='valid']").each(function () { //遍历span
 var validSpan = $(this);
 var to = validSpan.attr("to");
 var target;
 if (to) {
 target = $("input[name='" + to + "'],select[name='" + to + "'],textarea[name='" + to + "']");
 } else {
 target = validSpan.prev();
 }
 if (target) {
 if (!SimpoValidate.validOne(target, validSpan)) {
  bl = false;
 }
 }
 });

 return bl;
 },

 //单个验证，验证成功返回true
 validOne: function (target, validSpan) {
 SimpoValidate.removehilight(target, msg);

 var rule = SimpoValidate.getRule(validSpan);
 var msg = validSpan.attr("msg");
 var nullable = validSpan.attr("class").indexOf("nullable") == -1 ? false : true; //是否可为空
 var to = validSpan.attr("to");

 if (target) {
 //checkbox或radio
 if (target[0].tagName.toLowerCase() == "input" && target.attr("type") && (target.attr("type").toLowerCase() == "checkbox" || target.attr("type").toLowerCase() == "radio")) {
 var checkedInput = $("input[name='" + to + "']:checked");
 if (!nullable) {
  if (checkedInput.length == 0) {
  SimpoValidate.hilight(target, msg);
  return false;
  }
 }
 }

 //input或select
 if (target[0].tagName.toLowerCase() == "input" || target[0].tagName.toLowerCase() == "select") {
 var val = target.val();
 if (!nullable) {
  if ($.trim(val) == "") {
  SimpoValidate.hilight(target, msg);
  return false;
  }
 }
 else {
  if ($.trim(val) == "") {
  SimpoValidate.removehilight(target, msg);
  return true;
  }
 }

 if (rule) {
  var reg = new RegExp(rule);
  if (!reg.test(val)) {
  SimpoValidate.hilight(target, msg);
  return false;
  }
 }
 }
 else if (target[0].tagName.toLowerCase() == "textarea") {
 var val = target.text();
 if (!nullable) {
  if ($.trim(val) == "") {
  SimpoValidate.hilight(target, msg);
  return false;
  }
 }
 else {
  if ($.trim(val) == "") {
  SimpoValidate.removehilight(target, msg);
  return true;
  }
 }

 if (rule) {
  var reg = new RegExp(rule);
  if (!reg.test(val)) {
  SimpoValidate.hilight(target, msg);
  return false;
  }
 }
 }
 }

 return true;
 },

 //获取验证规则
 getRule: function (validSpan) {
 var rule = validSpan.attr("rule");
 switch ($.trim(rule)) {
 case "int":
 return this.rules.int;
 case "number":
 return this.rules.number;
 default:
 return rule;
 break;
 }
 },

 //红边框及错误提示
 hilight: function (target, msg) {
 target.addClass("failvalid");
 target.bind("mouseover", function (e) {
 SimpoValidate.tips(target, msg, e);
 });
 target.bind("mouseout", function () {
 SimpoValidate.removetips();
 });
 },

 //取消红边框及错误提示
 removehilight: function (target) {
 target.unbind("mouseover");
 target.unbind("mouseout");
 target.removeClass("failvalid");
 SimpoValidate.removetips();
 },

 //显示提示
 tips: function (target, text, e) {
 var divtipsstyle = "position: absolute; left: 0; top: 0; background-color: #dceaf2; padding: 3px; border: solid 1px #6dbde4; visibility: hidden; line-height:20px; ";
 $("body").append("<div class='div-tips' style='" + divtipsstyle + "'>" + text + "</div>");

 var divtips = $(".div-tips");
 divtips.css("visibility", "visible");

 var top = e.clientY + $(window).scrollTop() - divtips.height() - 18;
 var left = e.clientX;
 divtips.css("top", top);
 divtips.css("left", left);

 $(target).mousemove(function (e) {
 var top = e.clientY + $(window).scrollTop() - divtips.height() - 18;
 var left = e.clientX;
 divtips.css("top", top);
 divtips.css("left", left);
 });
 },

 //移除提示
 removetips: function () {
 $(".div-tips").remove();
 }
};

$(function () {
 SimpoValidate.init();
});

1
2
3
<link type="text/css" href="~/Scripts/SimpoValidate.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript" src="~/Scripts/ValidateUtil.js"></script>

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
<table class="table-test" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 100%;">
 <tr>
 <td>
 <input name="c" value="" type="text" />
 <span class="valid nullable" rule="int" msg="可为空，请填写正整数"></span>
 </td>
 </tr>
 <tr>
 <td>
 <input name="d" value="" type="text" />
 <span class="valid" rule="number" msg="必填，请填写数字"></span>
 </td>
 </tr>
 <tr>
 <td>
 <select>
 <option value="-1">==请选择==</option>
 <option value="1">是</option>
 <option value="2">否</option>
 </select>
 <span class="valid" rule="^(?!-1$).+$" msg="必选"></span>
 </td>
 </tr>
 <tr>
 <td>
 <input name="a" value="1" type="checkbox" />
 <span>多</span>
 <input name="a" value="2" type="checkbox" />
 <span>少</span>
 <span class="valid" rule="" msg="必选" to="a"></span>
 </td>
 </tr>
 <tr>
 <td>
 <input name="b" value="1" type="radio" />
 <span>狗</span>
 <input name="b" value="2" type="radio" />
 <span>猫</span>
 <span class="valid" rule="" msg="必选" to="b"></span>
 </td>
 </tr>
 <tr>
 <td>
 <textarea cols="20" rows="5" style="height: 50px; width: 300px;"></textarea>
 <span class="valid nullable" rule="^(.|n){5,100}$" msg="可为空，长度必须大于等于5小于等于100"></span>
 </td>
 </tr>
</table>

1
2
3
4
5
6
//保存数据
function save() {
 if (SimpoValidate.valid()) { //执行验证
 $("#frm").submit(); //提交表单
 }
}