<!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版自定义模态框
<!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>
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>
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值变化事件
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>
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文件
传参版插件:
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文件
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);