Python菜鸟之路：通过案例学习JQuery

案例一：通过DOM绑定，实现基本的表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证: DOM实现</title>
    <style>
        .item{
            width: 250px;
            height: 60px;
            position: relative;
        }
        .item input{
            width: 200px;
        }
        .item span{
            position: absolute;
            top: 20px;
            left: 0px;
            font-size: 8px;
            background-color: indianred;
            color: white;
            display: inline-block;
            width: 200px;
        }
    </style>
</head>
<body>
    <div>
        <form>
            <div class="item">
                <input class="c1" type="text" name="username" label="用户名"/>
            </div>
            <div class="item">
                <input  class="c1" type="password" name="pwd" label="密码"/>
            </div>
            <input type="submit" value="提交" onclick="return CheckValid();" /> <!--DOM绑定click事件 -->
        </form>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        var flag = true;

        function CheckValid() {
            $('form .item span').remove();
            $('form .c1').each(function () {
                var val = $(this).val();
                if(val.length<=0){
                    var label = $(this).attr('label');
                    var tag = document.createElement('span')
                    tag.innerText = label + "不能为空";
                    $(this).after(tag);
                    flag = false;
                }
            });
            return flag;
        }
    </script>
</body>
</html>
DOM实现表单验证

案例二：通过JQuery事件绑定，实现基本的表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证:JS绑定事件</title>
    <style>
        .item{
            width: 250px;
            height: 60px;
            position: relative;
        }
        .item input{
            width: 200px;
        }
        .item span{
            position: absolute;
            top: 20px;
            left: 0px;
            font-size: 8px;
            background-color: indianred;
            color: white;
            display: inline-block;
            width: 200px;
        }
    </style>
</head>
<body>
    <div>
        <form>
            <div class="item">
                <input class="c1" type="text" name="username" label="用户名"/>
            </div>
            <div class="item">
                <input  class="c1" type="password" name="pwd" label="密码"/>
            </div>
            <input type="submit" value="提交"/>
        </form>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            BindCheckValid();
        });
         // 页面加载完之后，进行绑定事件
        function BindCheckValid() {
            $('form :submit').click(function () {
                var flag = true;
                $('form .item span').remove();
                $('form .c1').each(function () {
                    var val = $(this).val();
                    if(val.length<=0){
                        var label = $(this).attr('label');
                        var tag = document.createElement('span')
                        tag.innerText = label + "不能为空";
                        $(this).after(tag);
                        flag = false;
                    }
                });
                return flag;
            });
        }
    </script>
</body>
</html>
JS实现表单验证

案例三：通过JQuery扩展方法，实现基本的表单验证

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .item{
 8             width: 250px;
 9             height: 60px;
10             position: relative;
11         }
12         .item input{
13             width: 200px;
14         }
15         .item span{
16             position: absolute;
17             top: 20px;
18             left: 0px;
19             font-size: 8px;
20             background-color: indianred;
21             color: white;
22             display: inline-block;
23             width: 200px;
24         }
25     </style>
26 </head>
27 <body>
28 
29     <div>
30         <form id="form1">
31             <div class="item">
32                 <input class="c1" type="text" name="username" label="用户名" require="true" min-len="6"/>
33             </div>
34             <div class="item">
35                 <input  class="c1" type="password" name="pwd" label="密码"/>
36             </div>
37             <div class="item">
38                 <input  class="c1" type="text" name="phone" label="手机" require="true" phone="true"/>
39             </div>
40             <input type="submit" value="提交" />
41         </form>
42 
43     </div>
44 
45     <script src="jquery-1.12.4.js"></script>
46     <script src="commons.js"></script>
47     <script>
48         $(function(){
49             $.valid('#form1');
50         });
51 
52 
53     </script>
54 </body>
55 </html>
HTML部分
 1 /**
 2  * Created by ACER on 2016/8/28.
 3  */
 4 (function(jq){
 5 
 6     function ErrorMessage(inp,message){
 7         var tag = document.createElement('span');
 8         tag.innerText = message;
 9         inp.after(tag);
10     }
11 
12     jq.extend({
13         valid:function(form){
14             // #form1 $('#form1')
15             jq(form).find(':submit').click(function(){
16 
17                 jq(form).find('.item span').remove();
18 
19                 var flag = true;
20                 jq(form).find(':text,:password').each(function(){
21 
22                     var require = $(this).attr('require');
23                     if(require){
24                         var val = $(this).val();
25 
26                         if(val.length<=0){
27                             var label = $(this).attr('label');
28                             ErrorMessage($(this),label + "不能为空");
29                             flag = false;
30                             return false;
31                         }
32 
33                         var minLen = $(this).attr('min-len');
34                         if(minLen){
35                             var minLenInt = parseInt(minLen);
36                             if(val.length<minLenInt){
37                                 var label = $(this).attr('label');
38                                 ErrorMessage($(this),label + "长度最小为"+ minLen);
39                                 flag = false;
40                                 return false;
41                             }
42                             //json.stringify()
43                             //JSON.parse()
44                         }
45 
46                         var phone = $(this).attr('phone');
47                         if(phone){
48                             // 用户输入内容是否是手机格式
49                             var phoneReg = /^1[3|5|8]\d{9}$/;
50                             if(!phoneReg.test(val)){
51                                 var label = $(this).attr('label');
52                                 ErrorMessage($(this),label + "格式错误");
53                                 flag = false;
54                                 return false;
55                             }
56                         }
57 
58                         // 1、html自定义标签属性
59                         // 增加验证规则+错误提示
60 
61                     }
62                     // 每一个元素执行次匿名函数
63                     // this
64                     //console.log(this,$(this));
65                     /*
66                     var val = $(this).val();
67                     if(val.length<=0){
68                         var label = $(this).attr('label');
69                         var tag = document.createElement('span');
70                         tag.innerText = label + "不能为空";
71                         $(this).after(tag);
72                         flag = false;
73                         return false;
74                     }
75                     */
76                 });
77 
78                 return flag;
79             });
80         }
81     });
82 })(jQuery);
JS部分

 

posted @ 2016-09-01 15:57  jishuweiwang  阅读(293)  评论(0)  编辑  收藏  举报