Jquery揭秘系列:Validation实现

         之前讲了一部分揭秘系列的东西,由于年初的时候在改项目,也没有写下去。现在开始闲下来了,会继续写没写完的东西,各种原生js实现Jquery的功能。

         转入正题,说一下今天要讲的东西。

         相信很多tx在项目里面写过这样的js代码:

         $("#..").click(function(){

             var   val=$("#..").val();

              if(!val)

              {

               alert(‘.......‘);

               return    false;

               }

               if(!/...../.test(val))

              {

                 alert(‘.......‘);     

                 return    false;

              }

            ............各种验证

        });

       有没有觉得每次写的都是重复的东西,并且看起来不是很优雅,验证完全是可以写通用的。

       有的tx会说,我用的是Mvc的验证框架 ,只需要在后台代码的类的成员属性上面标记各种attribute,就能进行验证。这样确实是方便,但是不是很好控制。

       我觉得以下代码的写法看起来更直观,优雅:

       

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var objtest = {
               rules: {
                   col1: {
                       required: true,
                       max: 99,
                       min: 10,
                       reg: /^a/gi,
                       remote: ‘test.ashx‘
                   },
                   col2: {
                       required: true
                   }
               },
               msg: {
                   col1: {
                       required: ‘col1必填‘,
                       max: ‘最大不能超过99‘,
                       min: ‘最小不能小于10‘,
                       reg: ‘必须以a开头‘
                   },
                   col2: {
                       required: ‘col2必填‘
 
                   }
               }
 
           }
 
  $("#form").Validate(objtest);

        没错,这就是 validate框架里面的验证写法。

        讲到这个话题,你需要做一下功课,了解一下jquery.validate.js。我现在是要讲一下里面的实现原理:

       代码里面我只写了四个基本的验证:是否必填,最大值,最小值,正则匹配。

     

         这里我写一个简单的id选择器,同样是用$符号,看过我的博客的同学应该看到过。

          

  var $ = function () {
                var arr = Array.prototype.slice.call(arguments);
                return new $.prototype.Init(arr.length > 0 ? arr[0] : null);
            }

         下面继续扩展一些原型方法:

          $.prototype = {
                Init: function (id) {
                    this.form = document.getElementById(id);
                    this.childs = this.form.childNodes;
                },
                Validate:function(){

                 这段代码单独拿出来。。。

               }

           }

          Validate方法里面有个处理错误信息的div:

         

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var that = this;
 ///移除错误提醒的div
 var removeDiv = function () {
     var getErrdiv = document.getElementById(‘errmsg‘);
     if (getErrdiv) {
         that.form.removeChild(getErrdiv);
     }
 }
 ///创建一个错误提醒的div
 var creatDiv = function (msg, objset) {
     var div = document.createElement(‘div‘);
     div.style.backgroundColor = ‘red‘;
     div.id = ‘errmsg‘;
     div.innerHTML = msg;
     that.form.appendChild(div);
 }

         然后就是   form   的onsubmit  事件:

       

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
this.form.onsubmit = function () {
    var msg = "";
    var checked = true;
    removeDiv();
    if (obj.rules) {
        for (var i in obj.rules) {
            var col = obj.rules[i];
            ///必填验证
            if (col.required) {
                for (var m = 0; m < that.childs.length; m++) {
                    if (that.childs[m].id == i && !that.childs[m].value) {
                        msg = obj.msg[i].required;
                        that.childs[m].focus();
                        creatDiv(msg);
                        return false;
                    }
                }
 
            }
            ///最大值验证
            if (col.max) {
                for (var m = 0; m < that.childs.length; m++) {
                    if (that.childs[m].id == i && that.childs[m].value > col.max) {
                        msg = obj.msg[i].max;
                        creatDiv(msg);
                        that.childs[m].focus();
                        return false;
                    }
                }
 
            }
            ///最小值验证
            if (col.min) {
                for (var m = 0; m < that.childs.length; m++) {
                    if (that.childs[m].id == i && that.childs[m].value < col.min) {
                        msg = obj.msg[i].min;
                        creatDiv(msg);
                        that.childs[m].focus();
                        return false;
                    }
                }
 
            }
            ////正则匹配
            if (col.reg) {
                for (var m = 0; m < that.childs.length; m++) {
 
                    if (that.childs[m].id == i && (!col.reg.test(that.childs[m].value))) {
 
                        msg = obj.msg[i].reg;
                        creatDiv(msg);
 
                        that.childs[m].focus();
 
                        return false;
                    }
                }
            }
       
        }
 
    }
    return checked;
}

 这里面其实是用对象的属性对应控件的id ,然后分别做验证,只是把逻辑放在一块集中做了处理。

完整代码   :

 

Jquery揭秘系列:Validation实现
   var $ = function () {
                var arr = Array.prototype.slice.call(arguments);
                return new $.prototype.Init(arr.length > 0 ? arr[0] : null);
            }
            $.prototype = {
                Init: function (id) {
                    this.form = document.getElementById(id);
                    this.childs = this.form.childNodes;
                },
                Validate: function (obj) {
                    var that = this;
                    ///移除错误提醒的div
                    var removeDiv = function () {
                        var getErrdiv = document.getElementById(‘errmsg‘);
                        if (getErrdiv) {
                            that.form.removeChild(getErrdiv);
                        }
                    }
                    ///创建一个错误提醒的div
                    var creatDiv = function (msg, objset) {
                        var div = document.createElement(‘div‘);
                        div.style.backgroundColor = ‘red‘;
                        div.id = ‘errmsg‘;
                        div.innerHTML = msg;
                        that.form.appendChild(div);
                    }
                   
              
                    this.form.onsubmit = function () {
                        var msg = "";
                        var checked = true;
                        removeDiv();
                        if (obj.rules) {
                            for (var i in obj.rules) {
                                var col = obj.rules[i];
                                ///必填验证
                                if (col.required) {
                                    for (var m = 0; m < that.childs.length; m++) {
                                        if (that.childs[m].id == i && !that.childs[m].value) {
                                            msg = obj.msg[i].required;
                                            that.childs[m].focus();
                                            creatDiv(msg);
                                            return false;
                                        }
                                    }

                                }
                                ///最大值验证
                                if (col.max) {
                                    for (var m = 0; m < that.childs.length; m++) {
                                        if (that.childs[m].id == i && that.childs[m].value > col.max) {
                                            msg = obj.msg[i].max;
                                            creatDiv(msg);
                                            that.childs[m].focus();
                                            return false;
                                        }
                                    }

                                }
                                ///最小值验证
                                if (col.min) {
                                    for (var m = 0; m < that.childs.length; m++) {
                                        if (that.childs[m].id == i && that.childs[m].value < col.min) {
                                            msg = obj.msg[i].min;
                                            creatDiv(msg);
                                            that.childs[m].focus();
                                            return false;
                                        }
                                    }

                                }
                                ////正则匹配
                                if (col.reg) {
                                    for (var m = 0; m < that.childs.length; m++) {

                                        if (that.childs[m].id == i && (!col.reg.test(that.childs[m].value))) {

                                            msg = obj.msg[i].reg;
                                            creatDiv(msg);

                                            that.childs[m].focus();

                                            return false;
                                        }
                                    }
                                }
                          
                            }

                        }
                        return checked;
                    }
                }
            }

            $.prototype.Init.prototype = $.prototype;
Jquery揭秘系列:Validation实现

           代码看着没啥难度,比较简单 。

          调用方法如下  :

         

  <form id="test">
        <input id="col1" type="text" />
        <input id="col2" type="text" />
        <input id="Submit1" type="submit" value="submit" />
    </form>
Jquery揭秘系列:Validation实现
window.onload=function(){


  var objtest = {
                rules: {
                    col1: {
                        required: true,
                        max: 99,
                        min: 10,
                        reg: /^a/gi,
                        remote: ‘test.ashx‘
                    },
                    col2: {
                        required: true

                    }
                },
                msg: {
                    col1: {
                        required: ‘col1必填‘,
                        max: ‘最大不能超过99‘,
                        min: ‘最小不能小于10‘,
                        reg: ‘必须以a开头‘
                    },
                    col2: {
                        required: ‘col2必填‘

                    }
                }

            }

            $("test").Validate(objtest);








}
Jquery揭秘系列:Validation实现

代码可以继续优化,添加各种验证方法。这里只是抛砖引玉。有啥意见或者疑问可以联系:QQ546558309,或者留言。

下一节会讲ajax的原生js实现。

 

       

        

Jquery揭秘系列:Validation实现,布布扣,bubuko.com

Jquery揭秘系列:Validation实现

上一篇:asp.net下简单的Epplus导出excel


下一篇:Ubuntu上搭建Watir-Webdriver与Cucumber环境