jQuery常用功能代码

其他 2018-06-06 23:52:50 阅读次数: 8 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>自定义模态框</title>
  <style>
    .cover {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: darkgrey;
      z-index: 999;
    }
    .modal {
      width: 600px;
      height: 400px;
      background-color: white;
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -300px;
      margin-top: -200px;
      z-index: 1000;
    }
    .hide {
      display: none;
    }
  </style>
</head>
<body>
<input type="button" value="弹" id="i0">

<div class="cover hide"></div>
<div class="modal hide">
  <label for="i1">姓名</label>
  <input id="i1" type="text">
   <label for="i2">爱好</label>
  <input id="i2" type="text">
  <input type="button" id="i3" value="关闭">
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
  var tButton = $("#i0")[0];
  tButton.onclick=function () {
    var coverEle = $(".cover")[0];
    var modalEle = $(".modal")[0];

    $(coverEle).removeClass("hide");
    $(modalEle).removeClass("hide");
  };

  var cButton = $("#i3")[0];
  cButton.onclick=function () {
    var coverEle = $(".cover")[0];
    var modalEle = $(".modal")[0];

    $(coverEle).addClass("hide");
    $(modalEle).addClass("hide");
  }
</script>
</body>
</html>

jQuery版自定义模态框
自定义模态框，使用jQuery实现弹出和隐藏功能 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>左侧菜单示例</title>
  <style>
    .left {
      position: fixed;
      left: 0;
      top: 0;
      width: 20%;
      height: 100%;
      background-color: rgb(47, 53, 61);
    }

    .right {
      width: 80%;
      height: 100%;
    }

    .menu {
      color: white;
    }

    .title {
      text-align: center;
      padding: 10px 15px;
      border-bottom: 1px solid #23282e;
    }

    .items {
      background-color: #181c20;

    }
    .item {
      padding: 5px 10px;
      border-bottom: 1px solid #23282e;
    }

    .hide {
      display: none;
    }
  </style>
</head>
<body>

<div class="left">
  <div class="menu">
    <div class="title">菜单一</div>
    <div class="items">
      <div class="item">111</div>
      <div class="item">222</div>
      <div class="item">333</div>
    </div>
    <div class="title">菜单二</div>
    <div class="items hide">
      <div class="item">111</div>
      <div class="item">222</div>
      <div class="item">333</div>
    </div>
    <div class="title">菜单三</div>
    <div class="items hide">
      <div class="item">111</div>
      <div class="item">222</div>
      <div class="item">333</div>
    </div>
  </div>
</div>
<div class="right"></div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script>
  $(".title").click(function (){  // jQuery绑定事件
    // 隐藏所有class里有.items的标签
    $(".items").addClass("hide");  //批量操作
    $(this).next().removeClass("hide");
  });
</script>
左侧菜单 
  1 <!DOCTYPE html>
  2 <html lang="zh-CN">
  3 <head>
  4   <meta charset="UTF-8">
  5   <meta http-equiv="x-ua-compatible" content="IE=edge">
  6   <meta name="viewport" content="width=device-width, initial-scale=1">
  7   <title>位置相关示例之返回顶部</title>
  8   <style>
  9     .c1 {
 10       width: 100px;
 11       height: 200px;
 12       background-color: red;
 13     }
 14 
 15     .c2 {
 16       height: 50px;
 17       width: 50px;
 18 
 19       position: fixed;
 20       bottom: 15px;
 21       right: 15px;
 22       background-color: #2b669a;
 23     }
 24     .hide {
 25       display: none;
 26     }
 27     .c3 {
 28       height: 100px;
 29     }
 30   </style>
 31 </head>
 32 <body>
 33 <button id="b1" class="btn btn-default">点我</button>
 34 <div class="c1"></div>
 35 <div class="c3">1</div>
 36 <div class="c3">2</div>
 37 <div class="c3">3</div>
 38 <div class="c3">4</div>
 39 <div class="c3">5</div>
 40 <div class="c3">6</div>
 41 <div class="c3">7</div>
 42 <div class="c3">8</div>
 43 <div class="c3">9</div>
 44 <div class="c3">10</div>
 45 <div class="c3">11</div>
 46 <div class="c3">12</div>
 47 <div class="c3">13</div>
 48 <div class="c3">14</div>
 49 <div class="c3">15</div>
 50 <div class="c3">16</div>
 51 <div class="c3">17</div>
 52 <div class="c3">18</div>
 53 <div class="c3">19</div>
 54 <div class="c3">20</div>
 55 <div class="c3">21</div>
 56 <div class="c3">22</div>
 57 <div class="c3">23</div>
 58 <div class="c3">24</div>
 59 <div class="c3">25</div>
 60 <div class="c3">26</div>
 61 <div class="c3">27</div>
 62 <div class="c3">28</div>
 63 <div class="c3">29</div>
 64 <div class="c3">30</div>
 65 <div class="c3">31</div>
 66 <div class="c3">32</div>
 67 <div class="c3">33</div>
 68 <div class="c3">34</div>
 69 <div class="c3">35</div>
 70 <div class="c3">36</div>
 71 <div class="c3">37</div>
 72 <div class="c3">38</div>
 73 <div class="c3">39</div>
 74 <div class="c3">40</div>
 75 <div class="c3">41</div>
 76 <div class="c3">42</div>
 77 <div class="c3">43</div>
 78 <div class="c3">44</div>
 79 <div class="c3">45</div>
 80 <div class="c3">46</div>
 81 <div class="c3">47</div>
 82 <div class="c3">48</div>
 83 <div class="c3">49</div>
 84 <div class="c3">50</div>
 85 <div class="c3">51</div>
 86 <div class="c3">52</div>
 87 <div class="c3">53</div>
 88 <div class="c3">54</div>
 89 <div class="c3">55</div>
 90 <div class="c3">56</div>
 91 <div class="c3">57</div>
 92 <div class="c3">58</div>
 93 <div class="c3">59</div>
 94 <div class="c3">60</div>
 95 <div class="c3">61</div>
 96 <div class="c3">62</div>
 97 <div class="c3">63</div>
 98 <div class="c3">64</div>
 99 <div class="c3">65</div>
100 <div class="c3">66</div>
101 <div class="c3">67</div>
102 <div class="c3">68</div>
103 <div class="c3">69</div>
104 <div class="c3">70</div>
105 <div class="c3">71</div>
106 <div class="c3">72</div>
107 <div class="c3">73</div>
108 <div class="c3">74</div>
109 <div class="c3">75</div>
110 <div class="c3">76</div>
111 <div class="c3">77</div>
112 <div class="c3">78</div>
113 <div class="c3">79</div>
114 <div class="c3">80</div>
115 <div class="c3">81</div>
116 <div class="c3">82</div>
117 <div class="c3">83</div>
118 <div class="c3">84</div>
119 <div class="c3">85</div>
120 <div class="c3">86</div>
121 <div class="c3">87</div>
122 <div class="c3">88</div>
123 <div class="c3">89</div>
124 <div class="c3">90</div>
125 <div class="c3">91</div>
126 <div class="c3">92</div>
127 <div class="c3">93</div>
128 <div class="c3">94</div>
129 <div class="c3">95</div>
130 <div class="c3">96</div>
131 <div class="c3">97</div>
132 <div class="c3">98</div>
133 <div class="c3">99</div>
134 <div class="c3">100</div>
135 
136 <button id="b2" class="btn btn-default c2 hide">返回顶部</button>
137 <script src="jquery-3.2.1.min.js"></script>
138 <script>
139   $("#b1").on("click", function () {
140     $(".c1").offset({left: 200, top:200});
141   });
142 
143 
144   $(window).scroll(function () {
145     if ($(window).scrollTop() > 100) {
146       $("#b2").removeClass("hide");
147     }else {
148       $("#b2").addClass("hide");
149     }
150   });
151   $("#b2").on("click", function () {
152     $(window).scrollTop(0);
153   })
154 </script>
155 </body>
156 </html>
157 
158 返回顶部示例
返回顶部示例 
 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="x-ua-compatible" content="IE=edge">
 6   <meta name="viewport" content="width=device-width, initial-scale=1">
 7   <title>文本操作之登录验证</title>
 8   <style>
 9     .error {
10       color: red;
11     }
12   </style>
13 </head>
14 <body>
15 
16 <form action="">
17   <div>
18     <label for="input-name">用户名</label>
19     <input type="text" id="input-name" name="name">
20     <span class="error"></span>
21   </div>
22   <div>
23     <label for="input-password">密码</label>
24     <input type="password" id="input-password" name="password">
25     <span class="error"></span>
26   </div>
27   <div>
28     <input type="button" id="btn" value="提交">
29   </div>
30 </form>
31 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
32 <script>
33   $("#btn").click(function () {
34     var username = $("#input-name").val();
35     var password = $("#input-password").val();
36 
37     if (username.length === 0) {
38       $("#input-name").siblings(".error").text("用户名不能为空");
39     }
40     if (password.length === 0) {
41       $("#input-password").siblings(".error").text("密码不能为空");
42     }
43   })
44 </script>
45 </body>
46 </html>
自定义登录校验示例 
 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="x-ua-compatible" content="IE=edge">
 6   <meta name="viewport" content="width=device-width, initial-scale=1">
 7   <title>克隆</title>
 8   <style>
 9     #b1 {
10       background-color: deeppink;
11       padding: 5px;
12       color: white;
13       margin: 5px;
14     }
15     #b2 {
16       background-color: dodgerblue;
17       padding: 5px;
18       color: white;
19       margin: 5px;
20     }
21   </style>
22 </head>
23 <body>
24 
25 <button id="b1">屠龙宝刀，点击就送</button>
26 <hr>
27 <button id="b2">屠龙宝刀，点击就送</button>
28 
29 <script src="jquery-3.2.1.min.js"></script>
30 <script>
31   // clone方法不加参数true，克隆标签但不克隆标签带的事件
32   $("#b1").on("click", function () {
33     $(this).clone().insertAfter(this);
34   });
35   // clone方法加参数true，克隆标签并且克隆标签带的事件
36   $("#b2").on("click", function () {
37     $(this).clone(true).insertAfter(this);
38   });
39 </script>
40 </body>
41 </html>
点击复制按钮 
  1 <!DOCTYPE html>
  2 <html lang="zh-CN">
  3 <head>
  4   <meta charset="UTF-8">
  5   <meta http-equiv="x-ua-compatible" content="IE=edge">
  6   <meta name="viewport" content="width=device-width, initial-scale=1">
  7   <title>键盘事件示例</title>
  8 </head>
  9 <body>
 10 
 11 <table border="1">
 12   <thead>
 13   <tr>
 14     <th>#</th>
 15     <th>姓名</th>
 16     <th>操作</th>
 17   </tr>
 18   </thead>
 19   <tbody>
 20   <tr>
 21     <td><input type="checkbox"></td>
 22     <td>Egon</td>
 23     <td>
 24       <select>
 25         <option value="1">上线</option>
 26         <option value="2">下线</option>
 27         <option value="3">停职</option>
 28       </select>
 29     </td>
 30   </tr>
 31   <tr>
 32     <td><input type="checkbox"></td>
 33     <td>Alex</td>
 34     <td>
 35       <select>
 36         <option value="1">上线</option>
 37         <option value="2">下线</option>
 38         <option value="3">停职</option>
 39       </select>
 40     </td>
 41   </tr>
 42   <tr>
 43     <td><input type="checkbox"></td>
 44     <td>Yuan</td>
 45     <td>
 46       <select>
 47         <option value="1">上线</option>
 48         <option value="2">下线</option>
 49         <option value="3">停职</option>
 50       </select>
 51     </td>
 52   </tr>
 53   <tr>
 54     <td><input type="checkbox"></td>
 55     <td>EvaJ</td>
 56     <td>
 57       <select>
 58         <option value="1">上线</option>
 59         <option value="2">下线</option>
 60         <option value="3">停职</option>
 61       </select>
 62     </td>
 63   </tr>
 64   <tr>
 65     <td><input type="checkbox"></td>
 66     <td>Gold</td>
 67     <td>
 68       <select>
 69         <option value="1">上线</option>
 70         <option value="2">下线</option>
 71         <option value="3">停职</option>
 72       </select>
 73     </td>
 74   </tr>
 75   </tbody>
 76 </table>
 77 
 78 <input type="button" id="b1" value="全选">
 79 <input type="button" id="b2" value="取消">
 80 <input type="button" id="b3" value="反选">
 81 
 82 <script src="jquery-3.2.1.min.js"></script>
 83 <script>
 84   // 全选
 85   $("#b1").on("click", function () {
 86     $(":checkbox").prop("checked", true);
 87   });
 88   // 取消
 89   $("#b2").on("click", function () {
 90     $(":checkbox").prop("checked", false);
 91   });
 92   // 反选
 93   $("#b3").on("click", function () {
 94     $(":checkbox").each(function () {
 95       var flag = $(this).prop("checked");
 96       $(this).prop("checked", !flag);
 97     })
 98   });
 99   // 按住shift键，批量操作
100   // 定义全局变量
101   var flag = false;
102   // 全局事件，监听键盘shift按键是否被按下
103   $(window).on("keydown", function (e) {
104 //    alert(e.keyCode);
105     if (e.keyCode === 16){
106       flag = true;
107     }
108   });
109   // 全局事件,shift按键抬起时将全局变量置为false
110   $(window).on("keyup", function (e) {
111     if (e.keyCode === 16){
112       flag = false;
113     }
114   });
115   // select绑定change事件
116   $("table select").on("change", function () {
117     // 是否为批量操作模式
118     if (flag) {
119       var selectValue = $(this).val();
120       // 找到所有被选中的那一行的select，选中指定值
121       $("input:checked").parent().parent().find("select").val(selectValue);
122     }
123   })
124 </script>
125 </body>
126 </html>
按住shift键批量操作 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="x-ua-compatible" content="IE=edge">
 6   <meta name="viewport" content="width=device-width, initial-scale=1">
 7   <title>hover示例</title>
 8   <style>
 9     * {
10       margin: 0;
11       padding: 0;
12     }
13     .nav {
14       height: 40px;
15       width: 100%;
16       background-color: #3d3d3d;
17       position: fixed;
18       top: 0;
19     }
20 
21     .nav ul {
22       list-style-type: none;
23       line-height: 40px;
24     }
25 
26     .nav li {
27       float: left;
28       padding: 0 10px;
29       color: #999999;
30       position: relative;
31     }
32     .nav li:hover {
33       background-color: #0f0f0f;
34       color: white;
35     }
36 
37     .clearfix:after {
38       content: "";
39       display: block;
40       clear: both;
41     }
42 
43     .son {
44       position: absolute;
45       top: 40px;
46       right: 0;
47       height: 50px;
48       width: 100px;
49       background-color: #00a9ff;
50       display: none;
51     }
52 
53     .hover .son {
54       display: block;
55     }
56   </style>
57 </head>
58 <body>
59 <div class="nav">
60   <ul class="clearfix">
61     <li>登录</li>
62     <li>注册</li>
63     <li>购物车
64       <p class="son hide">
65         空空如也...
66       </p>
67     </li>
68   </ul>
69 </div>
70 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
71 <script>
72 $(".nav li").hover(
73   function () {
74     $(this).addClass("hover");
75   },
76   function () {
77     $(this).removeClass("hover");
78   }
79 );
80 </script>
81 </body>
82 </html>
hover事件 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="x-ua-compatible" content="IE=edge">
 6   <meta name="viewport" content="width=device-width, initial-scale=1">
 7   <title>实时监听input输入值变化</title>
 8 </head>
 9 <body>
10 <input type="text" id="i1">
11 
12 <script src="jquery-3.2.1.min.js"></script>
13 <script>
14   /*
15   * oninput是HTML5的标准事件
16   * 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化，
17   * 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发
18   * oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代
19   * 使用jQuery库的话直接使用on同时绑定这两个事件即可。
20   * */
21   $("#i1").on("input propertychange", function () {
22     alert($(this).val());
23   })
24 </script>
25 </body>
26 </html>
27 
28 input值变化事件
input值变化事件 
 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="x-ua-compatible" content="IE=edge">
 6   <meta name="viewport" content="width=device-width, initial-scale=1">
 7   <title>登录注册示例</title>
 8   <style>
 9     .error {
10       color: red;
11     }
12   </style>
13 </head>
14 <body>
15 
16 <form id="myForm">
17   <label for="name">姓名</label>
18   <input type="text" id="name">
19   <span class="error"></span>
20   <label for="passwd">密码</label>
21   <input type="password" id="passwd">
22   <span class="error"></span>
23   <input type="submit" id="modal-submit" value="登录">
24 </form>
25 
26 <script src="jquery-3.2.1.min.js"></script>
27 <script src="s7validate.js"></script>
28 <script>
29   function myValidation() {
30     // 多次用到的jQuery对象存储到一个变量，避免重复查询文档树
31     var $myForm = $("#myForm");
32     $myForm.find(":submit").on("click", function () {
33       // 定义一个标志位，记录表单填写是否正常
34       var flag = true;
35       $myForm.find(":text, :password").each(function () {
36         var val = $(this).val();
37         if (val.length <= 0 ){
38           var labelName = $(this).prev("label").text();
39           $(this).next("span").text(labelName + "不能为空");
40           flag = false;
41         }
42       });
43       // 表单填写有误就会返回false，阻止submit按钮默认的提交表单事件
44       return flag;
45     });
46     // input输入框获取焦点后移除之前的错误提示信息
47     $myForm.find("input[type!='submit']").on("focus", function () {
48       $(this).next(".error").text("");
49     })
50   }
51   // 文档树就绪后执行
52   $(document).ready(function () {
53     myValidation();
54   });
55 </script>
56 </body>
57 </html>
58 
59 登录校验示例
登录校验示例 
 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="x-ua-compatible" content="IE=edge">
 6   <meta name="viewport" content="width=device-width, initial-scale=1">
 7   <title>点赞动画示例</title>
 8   <style>
 9     div {
10       position: relative;
11       display: inline-block;
12     }
13     div>i {
14       display: inline-block;
15       color: red;
16       position: absolute;
17       right: -16px;
18       top: -5px;
19       opacity: 1;
20     }
21   </style>
22 </head>
23 <body>
24 
25 <div id="d1">点赞</div>
26 <script src="jquery-3.2.1.min.js"></script>
27 <script>
28   $("#d1").on("click", function () {
29     var newI = document.createElement("i");
30     newI.innerText = "+1";
31     $(this).append(newI);
32     $(this).children("i").animate({
33       opacity: 0
34     }, 1000)
35   })
36 </script>
37 </body>
38 </html>
点赞特效简单示例

自定义的jQuery登录验证插件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="x-ua-compatible" content="IE=edge">
 6   <meta name="viewport" content="width=device-width, initial-scale=1">
 7   <title>登录校验示例</title>
 8   <style>
 9     .login-form {
10       margin: 100px auto 0;
11       max-width: 330px;
12     }
13     .login-form > div {
14       margin: 15px 0;
15     }
16     .error {
17       color: red;
18     }
19   </style>
20 </head>
21 <body>
22 
23 
24 <div>
25   <form action="" class="login-form" novalidate>
26 
27     <div>
28       <label for="username">姓名</label>
29       <input id="username" type="text" name="name" required autocomplete="off">
30       <span class="error"></span>
31     </div>
32     <div>
33       <label for="passwd">密码</label>
34       <input id="passwd" type="password" name="password" required autocomplete="off">
35       <span class="error"></span>
36     </div>
37     <div>
38       <label for="mobile">手机</label>
39       <input id="mobile" type="text" name="mobile" required autocomplete="off">
40       <span class="error"></span>
41     </div>
42     <div>
43       <label for="where">来自</label>
44       <input id="where" type="text" name="where" autocomplete="off">
45       <span class="error"></span>
46     </div>
47     <div>
48       <input type="submit" value="登录">
49     </div>
50 
51   </form>
52 </div>
53 
54 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
55 <script src="validate.js"></script>
56 <script>
57   $.validate();
58 </script>
59 </body>
60 </html>
HTML文件 
 1 "use strict";
 2 (function ($) {
 3   function check() {
 4     // 定义一个标志位，表示验证通过还是验证不通过
 5     var flag = true;
 6     var errMsg;
 7     // 校验规则
 8     $("form input[type!=':submit']").each(function () {
 9       var labelName = $(this).prev().text();
10       var inputName = $(this).attr("name");
11       var inputValue = $(this).val();
12       if ($(this).attr("required")) {
13         // 如果是必填项
14         if (inputValue.length === 0) {
15           // 值为空
16           errMsg = labelName + "不能为空";
17           $(this).next().text(errMsg);
18           flag = false;
19           return false;
20         }
21         // 如果是密码类型，我们就要判断密码的长度是否大于6位
22         if (inputName === "password") {
23           // 除了上面判断为不为空还要判断密码长度是否大于6位
24           if (inputValue.length < 6) {
25             errMsg = labelName + "必须大于6位";
26             $(this).next().text(errMsg);
27             flag = false;
28             return false;
29           }
30         }
31         // 如果是手机类型，我们需要判断手机的格式是否正确
32         if (inputName === "mobile") {
33           // 使用正则表达式校验inputValue是否为正确的手机号码
34           if (!/^1[345678]\d{9}$/.test(inputValue)) {
35             // 不是有效的手机号码格式
36             errMsg = labelName + "格式不正确";
37             $(this).next().text(errMsg);
38             flag = false;
39             return false;
40           }
41         }
42       }
43     });
44     return flag;
45   }
46 
47   function clearError(arg) {
48     // 清空之前的错误提示
49     $(arg).next().text("");
50   }
51   // 上面都是我定义的工具函数
52   $.extend({
53     validate: function () {
54       $("form :submit").on("click", function () {
55       return check();
56     });
57     $("form :input[type!='submit']").on("focus", function () {
58       clearError(this);
59     });
60     }
61   });
62 })(jQuery);
63 
64 JS文件
JS文件

传参版插件：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="x-ua-compatible" content="IE=edge">
 6   <meta name="viewport" content="width=device-width, initial-scale=1">
 7   <title>登录校验示例</title>
 8   <style>
 9     .login-form {
10       margin: 100px auto 0;
11       max-width: 330px;
12     }
13     .login-form > div {
14       margin: 15px 0;
15     }
16     .error {
17       color: red;
18     }
19   </style>
20 </head>
21 <body>
22 
23 
24 <div>
25   <form action="" class="login-form" novalidate>
26 
27     <div>
28       <label for="username">姓名</label>
29       <input id="username" type="text" name="name" required autocomplete="off">
30       <span class="error"></span>
31     </div>
32     <div>
33       <label for="passwd">密码</label>
34       <input id="passwd" type="password" name="password" required autocomplete="off">
35       <span class="error"></span>
36     </div>
37     <div>
38       <label for="mobile">手机</label>
39       <input id="mobile" type="text" name="mobile" required autocomplete="off">
40       <span class="error"></span>
41     </div>
42     <div>
43       <label for="where">来自</label>
44       <input id="where" type="text" name="where" autocomplete="off">
45       <span class="error"></span>
46     </div>
47     <div>
48       <input type="submit" value="登录">
49     </div>
50 
51   </form>
52 </div>
53 
54 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
55 <script src="validate3.js"></script>
56 <script>
57   $.validate({"name":{"required": true}, "password": {"required": true, "minLength": 8}, "mobile": {"required": true}});
58 </script>
59 </body>
60 </html>
61 
62 HTML文件
HTML文件 
 1 "use strict";
 2 (function ($) {
 3   function check(arg) {
 4     // 定义一个标志位，表示验证通过还是验证不通过
 5     var flag = true;
 6     var errMsg;
 7     // 校验规则
 8     $("form input[type!=':submit']").each(function () {
 9       var labelName = $(this).prev().text();
10       var inputName = $(this).attr("name");
11       var inputValue = $(this).val();
12       if (arg[inputName].required) {
13         // 如果是必填项
14         if (inputValue.length === 0) {
15           // 值为空
16           errMsg = labelName + "不能为空";
17           $(this).next().text(errMsg);
18           flag = false;
19           return false;
20         }
21         // 如果是密码类型，我们就要判断密码的长度是否大于6位
22         if (inputName === "password") {
23           // 除了上面判断为不为空还要判断密码长度是否大于6位
24           if (inputValue.length < arg[inputName].minLength) {
25             errMsg = labelName + "必须大于"+arg[inputName].minLength+"位";
26             $(this).next().text(errMsg);
27             flag = false;
28             return false;
29           }
30         }
31         // 如果是手机类型，我们需要判断手机的格式是否正确
32         if (inputName === "mobile") {
33           // 使用正则表达式校验inputValue是否为正确的手机号码
34           if (!/^1[345678]\d{9}$/.test(inputValue)) {
35             // 不是有效的手机号码格式
36             errMsg = labelName + "格式不正确";
37             $(this).next().text(errMsg);
38             flag = false;
39             return false;
40           }
41         }
42       }
43     });
44     return flag;
45   }
46 
47   function clearError(arg) {
48     // 清空之前的错误提示
49     $(arg).next().text("");
50   }
51   // 上面都是我定义的工具函数
52   $.extend({
53     validate: function (arg) {
54       $("form :submit").on("click", function () {
55       return check(arg);
56     });
57     $("form :input[type!='submit']").on("focus", function () {
58       clearError(this);
59     });
60     }
61   });
62 })(jQuery);
JS文件

猜你喜欢

转载自www.cnblogs.com/dingyutao/p/9147999.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022