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

前言

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

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

工作了一个星期各位一定累了吧，那我们一起来表单验证一番吧！相关推荐

（转）工作了一个星期各位一定累了吧，那我们一起来表单验证一番吧！
原文地址:http://www.cnblogs.com/yexiaochai/archive/2013/06/01/3111699.html 前言对于前端来说,没有做过表单验证是不可能的,但是,我们 ...
各位加了一天班累了吧？那我们来继续未完的表单验证吧
前言接着昨天的写:工作了一个星期各位一定累了吧,那我们一起来表单验证一番吧! 因为昨天写到后面确实写不动了,就停下了,今天我们继续吧,看看能不能解决昨天提出的几个问题,由于今天看了下别人写的插件,在 ...
javascript:正则表达式、一个表单验证的例子
阅读目录本文内容: 正则表达式: 利用正则表达式进行表单验证的例子: 回到顶部本文内容: 正则表达式正则表达式的使用方法正则表达式的特殊匹配字符正则表达式修饰符利用正则表达式进行表单验证的 ...
学习js,尝试写一个表单验证框架(1)－规划
斗胆放到首页来,如果不合适的话就删了吧,谢谢其实这个框架也已经写了一点了,但是越写越乱越没把握,最终决定写成博客的形式,强迫自己慢下步调,一点点仔细地规划,设计,思考,期间也一定会遇到不少问题,还请 ...
一个表单验证引发的深思！！！
需求实现一个表单验证,用于验证用户名,邮箱,密码等. function checkName() {// 验证用户名 } function checkEmail() {// 验证邮箱 } functi ...
写一个简单易用可扩展vue表单验证插件(vue-validate-easy)
写一个vue表单验证插件(vue-validate-easy) 需求目标:简单易用可扩展如何简单开发者要做的写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...
创建一个简单的后台教务管理系统,包含动态增删改查学生,年级和课程信息及查看登录日志等功能,包含表单验证.
创建一个简单的后台教务管理系统,包含动态增删改查学生,年级和课程信息及查看登录日志等功能,包含表单验证. 一.显示页面新建一个登录页面,即login.jsp <%--Created by In ...
jQuery Validation Engine 表单验证踩过的一个坑
jQuery Validation Engine表单验证是一个非常简单好用的前端验证插件,具体的使用手册可以参考: http://code.ciaoca.com/jquery/validation-e ...
asp.net接受表单验证格式后再提交数据_创建一个注册界面，并记录到数据库中...
demo开始时我们需要准备点东西 1.jQuery 可以去cdn.js上copy一个, 2.我们要安装好node.js, 因为需要自己搭建一个服务器去测试,32位,64位,下载后配置好就行 3.开始写 ...

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

工作了一个星期各位一定累了吧，那我们一起来表单验证一番吧！相关推荐

最新文章

热门文章