工作了一个星期各位一定累了吧，那我们一起来表单验证一番吧！-白红宇

前言

对于前端来说，没有做过表单验证是不可能的，但是，我们一般都是用的别人写好的插件，反正都周末了，我们今天晚上就试着看看自己能不能写一个出来试试呢？

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>请输入数字

</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>

身份证：<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>

</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，如需转载请自行联系原作者