前言
对于前端来说，没有做过表单验证是不可能的，但是，我们一般都是用的别人写好的插件，反正都周末了，我们今天晚上就试着看看自己能不能写一个出来试试呢？
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代码：
位置的代码
于是我们密密麻麻的形成了这个页面，主要思路见代码，我这里简单说下：
1 根据class变量表单，获取每个元素
2 定位到每个元素，根据其配置信息，将提示框插入文本，并定位之。
至此，我们提示框像个就结束了，后面点的内容，我支支吾吾搞了好久都不太能推走了，我们接下来看看吧。
如何验证表单？
有了提示信息，另外一个问题马上就出现了
1 我应该如何验证表单呢？正则表达式？如果我写的不满足后续需求呢？
2 如何实现密码对比功能
3 如何实现选择框等功能
4 如何实现非空验证功能
5 如何取消验证
6 取消验证后如何加上某项验证
......
一系列问题抛了出来，我就边写边思考，最后搞出来都面目全非了，形成了这样的代码：
js文件：
View Code
html代码：
View Code
结语
晃晃悠悠几个小时就过去了，今天的任务没能完成！！！！
写到后面就没有详细写下去了，因为我有几个问题没能解决，加之明天还要上班。。。。所以今天便不再坚持了。
明天晚上希望能解决自己的疑问，并整理下代码，再详加说明吧。
本文转自叶小钗博客园博客，原文链接：http://www.cnblogs.com/yexiaochai/archive/2013/06/01/3111699.html，如需转载请自行联系原作者
![[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635463/20241109/c55917b4a28342b78633c9da58d86e30.png?x-oss-process=image/resize,h_160,m_lfit)
