工作了一个星期各位一定累了吧，那我们一起来表单验证一番吧！
2013-06-24 11:01
621 查看
前言
对于前端来说，没有做过表单验证是不可能的，但是，我们一般都是用的别人写好的插件，反正都周末了，我们今天晚上就试着看看自己能不能写一个出来试试呢？PS：该产物纯粹实验产品，丑陋之处请多见谅！
验证的类型
常见的表单验证一般有以下几个：① 非空验证
② 身份证验证
③ 数字验证（数字范围验证）
④ 邮件验证
⑤ 手机验证
⑥ QQ验证
⑦ 中文/英文用户名验证（可能含有AJAX类型验证）
⑧ 密码验证/重复密码验证
⑨ 单选框/下拉菜单/多选框验证
......
我那个去，简简单单一写怎么会有这么多东西呢！！！！看来今天晚上有点吃紧了，没事我们一步步来试试，确实不行也不会罚款，确实错了也没人责备，我们错得起。
表单提示框
友好的提示框是第一位的，来来，比如我们这里有个文本框，我们需要实现如下提示框：
我们一个怎么做呢？而且提示框种类比较多，我们便不强求了，但是以下两种也是很有可能出现的，我们是不是应该考虑呢？
若是我们的网页要求出现以上三种任意一种表现形式一完全合理的，所以我们还得都实现了！
但是实现前我们先干点其他事情，看看这段有意思的代码吧：
三角形图标
<div style=" width: 10px; height: 10px; border-width: 10px; border-style: solid; border-color: black Yellow Gray Green"></div>
这段代码很有意思，我们来看看他将形成的图形，以及去掉宽度与高度会形成的样子：
<div style="width: 10px; height: 10px; border-width: 10px; border-style: solid; border-color: black Yellow Gray Green; position: absolute;"> </div> <div style="border-width: 10px; border-style: solid; border-color: black Yellow Gray Green; position: absolute; top: 50px;">
这个图形很怪，我们看着他的几个边框居然形成了三角形！！！！那我们是不是可以省略图标了呢？
<div style="border-width: 10px; border-style: solid; border-color: transparent; border-top-color: Black; position: absolute; top: 50px;">
<div style="border-width: 10px; border-style: solid; border-color: transparent; border-right-color: Black; position: absolute; top: 50px;">
<div style="border-width: 10px; border-style: solid; border-color: transparent; border-bottom-color: Black; position: absolute; top: 50px;">
<div style="border-width: 10px; border-style: solid; border-color: transparent; border-left-color: Black; position: absolute; top: 50px;">
以上这个东西各位应该都比较清楚的，而且看着提示图对他的使用也一定不言而喻，我这里还是赘述一下吧：
<div class="posTop" > <div class="triangle_icon"> <div class="before"></div> <div class="after"></div> </div>请输入数字 </div>
这就是图标的结构，以下是CSS样式：
.triangle_icon { position: absolute; }
.triangle_icon div { border-style: solid; border-width: 6px; position: absolute; }
/*上边提示*/
.posTop .triangle_icon { width: 12px; height: 12px; bottom: -12px; }
.posTop .triangle_icon .after { bottom: 1px; }
.posTop .triangle_icon .after { border-bottom-color: transparent; border-right-color: transparent; border-left-color: transparent; }
.posTop .triangle_icon .before { border-bottom-color: transparent; border-right-color: transparent; border-left-color: transparent; }为了根据外部ClassName而设置不同的展示方式，而且不同的状态拥有不同的样式，最后形成了这个CSS：
.validateTips { min-width: 100px; border-radius: 2px; padding: 5px 10px; z-index: 500; position: absolute; font-size: 12px; }
.validateInit { background: #FFFFE0; border: 1px solid #F7CE39; }
.validateError { background: orange; border: 1px solid red; }
.validateSuc { background: #79D62D; border: 1px solid Green; }
.triangle_icon { position: absolute; }
.triangle_icon div { border-style: solid; border-width: 6px; position: absolute; }
/*上边提示*/
.posTop .triangle_icon { width: 12px; height: 12px; bottom: -12px; }
.posTop .triangle_icon .after { bottom: 1px; }
.posTop .triangle_icon .after { border-bottom-color: transparent; border-right-color: transparent; border-left-color: transparent; }
.posTop .triangle_icon .before { border-bottom-color: transparent; border-right-color: transparent; border-left-color: transparent; }
/*右边提示*/
.posRight .triangle_icon { width: 12px; height: 12px; left: -12px; }
.posRight .triangle_icon .after { left: 1px; }
.posRight .triangle_icon .after { border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; }
.posRight .triangle_icon .before { border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; }
/*下边提示*/
.posBottom .triangle_icon { width: 12px; height: 12px; top: -12px; }
.posBottom .triangle_icon .after { top: 1px; }
.posBottom .triangle_icon .after { border-top-color: transparent; border-right-color: transparent; border-left-color: transparent; }
.posBottom .triangle_icon .before { border-top-color: transparent; border-right-color: transparent; border-left-color: transparent; }
/*初始化时候的皮肤*/
.validateInit .before { border-color: #F7CE39; }
.validateInit .after { border-color: #FFFFE0; }
/*失败时候的皮肤*/
.validateError .before { border-color: red; }
.validateError .after { border-color: orange; }
/*成功时候的皮肤*/
.validateSuc .before { border-color: Green; }
.validateSuc .after { border-color: #79D62D; }定位提示框
提示框样式有了，我们需要将它定位到特定的输入框之上，所以我规定了以下格式（实验产物，勿笑）：<div class="form">
<div>
身份证：<input type="text" id="idCard" class="formValidate" data-cfg="{ initMsg: '请输入身份证号码！' }" />
</div>
<div>
数字：<input type="text" id="num" class="formValidate" data-cfg="{ initMsg: '请输入数字', msgPosition: 'top'}" />
</div>
<div>
邮件：<input type="text" class="formValidate" data-cfg="{ initMsg: '请输入邮箱地址！'}" />
</div>
<div>
手机：<input type="text" class="formValidate" data-cfg="{ msgPosition: 'bottom', initMsg: '请请输入手机号码！'}" />
</div>
<div>
QQ：<input type="text" class="formValidate" data-cfg="{ initMsg: '请请输入手机号码！'}" />
</div>
<input type="button" value="提交" id="bt" />
</div>我们这里对需要验证的文本框做了一个约束：
① 要求指定ID（不知道需要不，但是考虑到漂浮提示以后的控制还是加上吧）
② 必须指定class拥有formValidate
③ 必须指定自定义属性（json），将配置信息加上
于是我们加上js代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.form div { height: 30px; line-height: 30px; margin: 5px; }
.validateTips { min-width: 100px; border-radius: 2px; padding: 5px 10px; z-index: 500; position: absolute; font-size: 12px; }
.validateInit { background: #FFFFE0; border: 1px solid #F7CE39; }
.validateError { background: orange; border: 1px solid red; }
.validateSuc { background: #79D62D; border: 1px solid Green; }
.triangle_icon { position: absolute; } .triangle_icon div { border-style: solid; border-width: 6px; position: absolute; } /*上边提示*/ .posTop .triangle_icon { width: 12px; height: 12px; bottom: -12px; } .posTop .triangle_icon .after { bottom: 1px; } .posTop .triangle_icon .after { border-bottom-color: transparent; border-right-color: transparent; border-left-color: transparent; } .posTop .triangle_icon .before { border-bottom-color: transparent; border-right-color: transparent; border-left-color: transparent; }
/*右边提示*/
.posRight .triangle_icon { width: 12px; height: 12px; left: -12px; }
.posRight .triangle_icon .after { left: 1px; }
.posRight .triangle_icon .after { border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; }
.posRight .triangle_icon .before { border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; }
/*下边提示*/
.posBottom .triangle_icon { width: 12px; height: 12px; top: -12px; }
.posBottom .triangle_icon .after { top: 1px; }
.posBottom .triangle_icon .after { border-top-color: transparent; border-right-color: transparent; border-left-color: transparent; }
.posBottom .triangle_icon .before { border-top-color: transparent; border-right-color: transparent; border-left-color: transparent; }
/*初始化时候的皮肤*/
.validateInit .before { border-color: #F7CE39; }
.validateInit .after { border-color: #FFFFE0; }
/*失败时候的皮肤*/
.validateError .before { border-color: red; }
.validateError .after { border-color: orange; }
/*成功时候的皮肤*/
.validateSuc .before { border-color: Green; }
.validateSuc .after { border-color: #79D62D; }
</style>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/yexiaochai_formValidator.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.formValidate').each(function () {
var el = $(this);
var cfg = el.attr('data-cfg');
if (cfg && cfg.length > 0) {
cfg = eval('(' + cfg + ')');
// cfg = JSON.parse(cfg);
var initMsg = cfg.initMsg || '请填入信息';
var msgPosition = cfg.msgPosition || 'right';
var id = el.attr('id') || new Date().getTime();
var tips = $('<div class="validateTips validateInit" id="' + id + 'Tips"><div class="triangle_icon"><div class="before"></div><div class="after"></div></div>' + initMsg + '</div>');
var offset = el.offset();
var height = parseInt(el.outerHeight());
var width = parseInt(el.outerWidth());
var l = offset.left;
var t = offset.top;
if (msgPosition == 'bottom') {
tips.addClass('posBottom');
t += height + 4;
} else if (msgPosition == 'right') {
tips.addClass('posRight');
l += width + 6;
} else if (msgPosition == 'top') {
tips.addClass('posTop');
t += height * (-1) - 8;
}
tips.css({ left: l, top: t });
$('body').append(tips);
}
}); //each
});
</script>
</head>
<body>
<div class="form"> <div> 身份证：<input type="text" id="idCard" class="formValidate" data-cfg="{ initMsg: '请输入身份证号码！' }" /> </div> <div> 数字：<input type="text" id="num" class="formValidate" data-cfg="{ initMsg: '请输入数字', msgPosition: 'top'}" /> </div> <div> 邮件：<input type="text" class="formValidate" data-cfg="{ initMsg: '请输入邮箱地址！'}" /> </div> <div> 手机：<input type="text" class="formValidate" data-cfg="{ msgPosition: 'bottom', initMsg: '请请输入手机号码！'}" /> </div> <div> QQ：<input type="text" class="formValidate" data-cfg="{ initMsg: '请请输入手机号码！'}" /> </div> <input type="button" value="提交" id="bt" /> </div>
</body>
</html>
位置的代码
于是我们密密麻麻的形成了这个页面，主要思路见代码，我这里简单说下：
1 根据class变量表单，获取每个元素
2 定位到每个元素，根据其配置信息，将提示框插入文本，并定位之。
至此，我们提示框像个就结束了，后面点的内容，我支支吾吾搞了好久都不太能推走了，我们接下来看看吧。
如何验证表单？
有了提示信息，另外一个问题马上就出现了1 我应该如何验证表单呢？正则表达式？如果我写的不满足后续需求呢？
2 如何实现密码对比功能
3 如何实现选择框等功能
4 如何实现非空验证功能
5 如何取消验证
6 取消验证后如何加上某项验证
......
一系列问题抛了出来，我就边写边思考，最后搞出来都面目全非了，形成了这样的代码：
js文件：
1 (function ($) {
2 var FormValidator = function () {
3 this.regexEnum = {
4 idCard: /^[1-9]([0-9]{14}|[0-9]{16})([0-9]|X)$/,
5 num: /^\-?([1-9]\d*)$/, //数字
6 email: /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/,
7 phone: /^1[3|4|5|8]\d{9}$/
8 };
9 this.validatorArr = {};
10 };
11
12 FormValidator.prototype.init = function () {
13 var scope = this;
14 $('.formValidate').each(function () {
15 var el = $(this);
16 scope.initItem(el);
17 }); //each
18 };
19
20 FormValidator.prototype.initItem = function (el) {
21 var scope = this;
22 var cfg = el.attr('data-cfg');
23
24 if (cfg && cfg.length > 0) {
25 cfg = eval('(' + cfg + ')');
26 // cfg = JSON.parse(cfg);
27 var check = cfg.check || true,
28 id = el.attr('id') || new Date().getTime(),
29 initMsg = cfg.initMsg || '请填入信息',
30 sucMsg = cfg.sucMsg || '格式正确',
31 errorMsg = cfg.errorMsg || '请注意格式',
32 type = cfg.type || '',
33 requred = cfg.requred || false,
34 msgPosition = cfg.msgPosition || 'right';
35
36 cfg.id = id;
37 cfg.initMsg = initMsg;
38 cfg.sucMsg = sucMsg;
39 cfg.errorMsg = errorMsg;
40 cfg.type = type;
41 cfg.msgPosition = msgPosition;
42 cfg.requred = requred;
43 cfg.requredMsg = cfg.requredMsg || '该项必填';
44
45 if (check) {
46 var tips = $('<div class="validateTips validateInit" id="' + id + 'Tips"><div class="triangle_icon"><div class="before"></div><div class="after"></div></div>' + initMsg + '</div>');
47 // var tips = $('<div class="validateTips validateInit" id="' + id + 'Tips">' + initMsg + '</div>');
48 var offset = el.offset();
49 var height = parseInt(el.outerHeight());
50 var width = parseInt(el.outerWidth());
51 var l = offset.left;
52 var t = offset.top;
53 if (msgPosition == 'bottom') {
54 tips.addClass('posBottom');
55 t += height + 4;
56 } else if (msgPosition == 'right') {
57 tips.addClass('posRight');
58 l += width + 6;
59 } else if (msgPosition == 'top') {
60 tips.addClass('posTop');
61 t += height * ( -1) - 8;
62 }
63
64 tips.css({ left: l, top: t });
65 $('body').append(tips);
66 cfg.el = el;
67 cfg.tipEl = tips;
68
69 el.focus(function () {
70 scope.funcValidate(el, cfg);
71 });
72 el.blur(function () {
73 scope.funcValidate(el, cfg);
74 });
75 el.keyup(function () {
76 scope.funcValidate(el, cfg);
77 });
78 el.keydown(function () {
79 scope.funcValidate(el, cfg);
80 });
81 cfg.validate = function () {
82 scope.funcValidate(el, cfg);
83 };
84 scope.validatorArr[id] = cfg; //生成相关验证对象
85 }
86
87 } else {
88 console.log('请输入完整验证信息！否则控件会产生错误！');
89 }
90 };
91
92 FormValidator.prototype.funcValidate = function (el, cfg) {
93 var id = cfg.id;
94
95 //取消事件不执行下面逻辑
96 if (!this.validatorArr[id])
97 return false;
98
99 var type = cfg.type;
100 var requred = cfg.requred;
101 if (!type && !this.regexEnum[type]) {
102 return false;
103 }
104 var isPass = 0; //0初始状态，1成功，-1错误
105 var msg = '';
106 var r = this.regexEnum[type] ? this.regexEnum[type] : type;
107
108 if (requred && el.val() == '') {
109 isPass = -1;
110 msg = cfg.requredMsg;
111 } else {
112 if (el.val() == '') {
113 isPass = 0;
114 msg = cfg.initMsg;
115 } else {
116 if (r.test(el.val())) {
117 isPass = 1;
118 msg = cfg.sucMsg;
119 } else {
120 isPass = -1;
121 msg = cfg.errorMsg;
122 }
123 }
124 }
125 if (isPass == 0) {
126 this.validatorArr[id]['tipEl'].removeClass('validateError');
127 this.validatorArr[id]['tipEl'].removeClass('validateSuc');
128 this.validatorArr[id]['tipEl'].addClass('validateInit');
129 this.validatorArr[id]['tipEl'].html('<div class="triangle_icon"><div class="before"></div><div class="after"></div></div>' + msg);
130 } else if (isPass == 1) {
131 this.validatorArr[id]['state'] = 'success';
132 this.validatorArr[id]['tipEl'].removeClass('validateError');
133 this.validatorArr[id]['tipEl'].removeClass('validateInit');
134 this.validatorArr[id]['tipEl'].addClass('validateSuc');
135 this.validatorArr[id]['tipEl'].html('<div class="triangle_icon"><div class="before"></div><div class="after"></div></div>' + msg);
136 } else if (isPass == -1) {
137 this.validatorArr[id]['state'] = 'error';
138 this.validatorArr[id]['tipEl'].removeClass('validateSuc');
139 this.validatorArr[id]['tipEl'].removeClass('validateInit');
140 this.validatorArr[id]['tipEl'].addClass('validateError');
141 this.validatorArr[id]['tipEl'].html('<div class="triangle_icon"><div class="before"></div><div class="after"></div></div>' + msg);
142 }
143 };
144
145 FormValidator.prototype.validatorAll = function () {
146 for (var k in this.validatorArr) {
147 var v = this.validatorArr[k];
148 v.validate();
149 }
150 };
151
152 FormValidator.prototype.removeValidator = function (id) {
153 if (id && this.validatorArr[id]) {
154 // this.validatorArr[id].tipEl
155 this.validatorArr[id].tipEl.remove(); //删除提示信息
156 delete this.validatorArr[id]; //删除该验证项目
157 // this.validatorArr[id].el.unbind();//移除所有事件，但是考虑标签可能会有其他事件，此处暂时不予处理
158 var s = '';
159 }
160 };
161
162 FormValidator.prototype.addValidator = function (id) {
163 var el = $('#' + id);
164 this.initItem(el);
165 };
166
167 FormValidator.prototype.validatorState = function () {
168 for (var k in this.validatorArr) {
169 var v = this.validatorArr[k];
170 if (v.state == 'error') {
171 return false;
172 }
173 }
174 return true;
175 };
176 window.FormValidator = FormValidator;
177 })(jQuery);View Code
html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.form div { height: 30px; line-height: 30px; margin: 5px; }
.validateTips { min-width: 100px; border-radius: 2px; padding: 5px 10px; z-index: 500; position: absolute; font-size: 12px; }
.validateInit { background: #FFFFE0; border: 1px solid #F7CE39; }
.validateError { background: orange; border: 1px solid red; }
.validateSuc { background: #79D62D; border: 1px solid Green; }
.triangle_icon { position: absolute; } .triangle_icon div { border-style: solid; border-width: 6px; position: absolute; } /*上边提示*/ .posTop .triangle_icon { width: 12px; height: 12px; bottom: -12px; } .posTop .triangle_icon .after { bottom: 1px; } .posTop .triangle_icon .after { border-bottom-color: transparent; border-right-color: transparent; border-left-color: transparent; } .posTop .triangle_icon .before { border-bottom-color: transparent; border-right-color: transparent; border-left-color: transparent; }
/*右边提示*/
.posRight .triangle_icon { width: 12px; height: 12px; left: -12px; }
.posRight .triangle_icon .after { left: 1px; }
.posRight .triangle_icon .after { border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; }
.posRight .triangle_icon .before { border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; }
/*下边提示*/
.posBottom .triangle_icon { width: 12px; height: 12px; top: -12px; }
.posBottom .triangle_icon .after { top: 1px; }
.posBottom .triangle_icon .after { border-top-color: transparent; border-right-color: transparent; border-left-color: transparent; }
.posBottom .triangle_icon .before { border-top-color: transparent; border-right-color: transparent; border-left-color: transparent; }
/*初始化时候的皮肤*/
.validateInit .before { border-color: #F7CE39; }
.validateInit .after { border-color: #FFFFE0; }
/*失败时候的皮肤*/
.validateError .before { border-color: red; }
.validateError .after { border-color: orange; }
/*成功时候的皮肤*/
.validateSuc .before { border-color: Green; }
.validateSuc .after { border-color: #79D62D; }
</style>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/yexiaochai_formValidator.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var f = new FormValidator();
f.init();
f.validatorAll();
var bt = $('#bt');
var add = $('#add');
var remove = $('#remove');
var name = $('#name');
bt.click(function () {
var end = f.validatorState();
var s = '';
});
add.click(function () {
f.addValidator(name.val());
var s = '';
});
remove.click(function () {
f.removeValidator(name.val());
var s = '';
});
});
</script>
</head>
<body>
<input type="text" id="name" />
<input type="button" value="取消验证" id="remove" />
<input type="button" value="添加验证" id="add" />
<div class="form">
<div>
身份证：<input type="text" id="idCard" class="formValidate" data-cfg="{ check: 'true', type: 'idCard', msgPosition: 'right', initMsg: '请输入身份证号码！', requred: true, sucMsg: '正确', errorMsg: '格式错误'}" />
</div>
<div>
数字：<input type="text" id="num" class="formValidate" data-cfg="{ type: 'num', initMsg: '请输入数字', msgPosition: 'top'}" />
</div>
<div>
邮件：<input type="text" class="formValidate" data-cfg="{ type: 'email', initMsg: '请输入邮箱地址！'}" />
</div>
<div>
手机：<input type="text" class="formValidate" data-cfg="{ type: 'phone', initMsg: '请请输入手机号码！'}" />
</div>
<div>
QQ：<input type="text" class="formValidate" data-cfg="{ type: /^[1-9]*[1-9][0-9]*$/, initMsg: '请请输入手机号码！'}" />
</div>
<div>
用户名：<input type="text" />
</div>
<div>
密码：<input type="text" />
</div>
<div>
重复密码：<input type="text" />
</div>
<div>
性别：
<label>
<input type="radio" name="Gender" value="0" />
男</label>
<label>
<input type="radio" name="Gender" value="1" />
女</label>
</div>
<div>
爱好：
<label>
<input type="checkbox" name="aihao" value="0" />
爱好1</label>
<label>
<input type="checkbox" name="aihao" value="1" />
爱好2</label>
<label>
<input type="checkbox" name="aihao" value="0" />
爱好3</label>
<label>
<input type="checkbox" name="aihao" value="1" />
爱好4</label>
</div>
<input type="button" value="提交" id="bt" />
</div>
</body>
</html>
View Code
结语
晃晃悠悠几个小时就过去了，今天的任务没能完成！！！！写到后面就没有详细写下去了，因为我有几个问题没能解决，加之明天还要上班。。。。所以今天便不再坚持了。
明天晚上希望能解决自己的疑问，并整理下代码，再详加说明吧。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 各位加了一天班累了吧？那我们来继续未完的表单验证吧
- 工作中经常用的表单验证，全部好用，验证好多次！
- 工作中常用到的JS表单验证代码(包括例子)
- 工作中常用到的JS表单验证代码(包括例子)
- JS通用表单验证函数,基于javascript正则表达式 最近工作比较忙
- 各位周末结束后都累了吧，那我们一起来看看【寒冬】的面试题吧（据说阿里的哟）
- 表单验证工作原理
- SimpleFormController的工作流程以及表单的验证
- 工作笔记3：关于表单验证validate插件的使用
- 工作中常用到的JS表单验证代码(包括例子)
- ASP.NET MVC异步验证是如何工作的02,异步验证表单元素的创建
- 各位周末结束后都累了吧，那我们一起来看看【寒冬】的面试题吧（据说阿里的哟）
- 各位周末结束后都累了吧，那我们一起来看看【寒冬】的面试题吧（据说阿里的哟）
- 各位周末结束后都累了吧，那我们一起来看看【寒冬】的面试题吧（据说阿里的哟）
- Javascript常用前台表单验证
- 基于Bootstrap的jQuery form表单验证插件
- JSValidation客户端表单验证框架
- 表单提交验证用到的ajax
- laravel验证码，自定义表单验证
- 表单验证by javascript