`
549265480
  • 浏览: 25632 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类

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

 
阅读更多

前言

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

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

结语

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

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

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

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics