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

前言

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

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

结语

晃晃悠悠几个小时就过去了，今天的任务没能完成！！！！

写到后面就没有详细写下去了，因为我有几个问题没能解决，加之明天还要上班。。。。所以今天便不再坚持了。

明天晚上希望能解决自己的疑问，并整理下代码，再详加说明吧。