前言

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

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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-1.7.1.min.js" type="text/javascript"></script>    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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].tipEl155             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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-1.7.1.min.js" type="text/javascript"></script>    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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

结语

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

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

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