jQuery03

2018-02-22 10:48:24来源:cnblogs.com作者:limuma人点击

分享

使用jQuery实现表单校验:(单独拿出来介绍表单校验,是因为内容比较多,知识点较多);

  1、注:这里使用validation插件完成对表单数据的校验;

    validate:一款优秀的表单验证插件——validation插件

  (1)特点:

         内置验证规则:拥有必填、数字、email、url和信用卡号码等19类内置验证规则;

         自定义验证规则:可以很方便的自定义验证规则;

         简单强大的验证信息提示:默认了验证信息提示,并提供自定义覆盖默认提示信息的功能;

         实时验证:可以通过keyup或bulr事件触发验证,而不仅仅在表单提交的时候验证。

  (2)既然是一个插件,使用之前就需要先导入文件validate库,当然同时也需要导入jQuery库,另外,也可导入支持中文的国际化资源库,如下:

    

    注:前两个库的导入顺序不能改变(先导jQuery,再导validate),jQuery版本可更改为1.8.3版本的

  2、介绍一下validate校验规则,看下图:

    

  根据此规则,我们先来写一段简单的入门校验代码:

  
 1 <!DOCTYPE html> 2 <html> 3     <head> 4         <meta charset="UTF-8"> 5         <title>validate入门案例</title> 6         <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> 7         <!--validate.js是建立在jquery之上的,所以得先导入jquery的类库--> 8         <script type="text/javascript" src="../../js/jquery.validate.min.js" ></script> 9         <!--引入国际化js文件-->10         <script type="text/javascript" src="../../js/messages_zh.js" ></script>11         <script>12             $(function(){13                 $("#checkForm").validate({14                     rules:{15                         username:{16                             required:true,17                             minlength:618                         },19                         password:{20                             required:true,21                             digits:true,22                             minlength:623                         }24                     },25                     messages:{26                         username:{27                             required:"用户名不能为空!",28                             minlength:"用户名不得少于6位!"29                         },30                         password:{31                             required:"密码不能为空!",32                             digits:"密码必须是整数!",33                             minlength:"密码不得少于6位!"34                         }35                     }36                 });37             });38         </script>39         40     </head>41     <body>42         <form action="#" id="checkForm">43             用户名:<input type="text" name="username" /><br />44             密码:<input type="password" name="password"/><br />45             <input type="submit"/>46         </form>47     </body>48 </html>
validate入门代码

  注:点开代码,里边的messages{}是用来自定义提示语的,当然你如果不写messages{},他会提示validate自带的提示语;

  接下来是用validate进行表单校验的代码(jQuery代码部分):

<script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script><script type="text/javascript" src="../../js/jquery.validate.min.js" ></script><script type="text/javascript" src="../../js/messages_zh.js" ></script><script>    $(function(){        $("#registForm").validate({            rules:{                user:{                    required:true,                    minlength:2                },                password:{                    required:true,                    digits:true,                    minlength:6                },                repassword:{                    required:true,                    digits:true,                    minlength:6,                    equalTo:"[name='password']"                },                email:{                    required:true,                    email:true                },                username:{                    required:true,                    minlength:2                },                sex:{                    required:true                }            },            messages:{                user:{                    required:"用户名不能为空!",                    minlength:"用户名不得少于2个字符!"                },                password:{                    required:"密码不能为空!",                    digits:"密码必须是数字!",                    minlength:"密码长度不得低于6位!"                },                repassword:{                    required:"确认密码不能为空!",                    digits:"密码必须是数字!",                    minlength:"密码长度不得低于6位!",                    equalTo:"两次密码不一致!"                },                email:{                    required:"邮箱不能为空!",                    email:"邮箱格式不正确!"                },                username:{                    required:"姓名不能为空!",                    minlength:"姓名不得少于2个字符!"                },                sex:{                    required:"性别必须勾选!"                }            },            errorElement: "label", //用来创建错误提示信息标签            success: function(label) { //验证成功后的执行的回调函数                //label指向上面那个错误提示信息标签label                label.text(" ") //清空错误提示消息                    .addClass("success"); //加上自定义的success类            }        });    })</script>

完整代码:

  1 <!DOCTYPE html>  2 <html>  3     <head>  4         <meta charset="UTF-8">  5         <title>网站注册页面</title>  6         <style>  7             #contanier{  8                 border: 0px solid white;  9                 width: 1300px; 10                 margin: auto; 11             } 12              13             #top{ 14                 border: 0px solid white; 15                 width: 100%; 16                 height: 50px; 17             } 18             #menu{ 19                 border: 0px solid white; 20                 height: 40px; 21                 background-color: black; 22                 padding-top: 10px; 23                 margin-bottom: 15px; 24                 margin-top: 10px; 25             } 26             .top{ 27                 border: 0px solid white; 28                 width: 405px; 29                 height: 100%; 30                 float: left; 31                 padding-left: 25px; 32             } 33             #top1{ 34                 padding-top: 15px; 35             } 36             #bottom{ 37                 margin-top: 13px; 38                 text-align: center; 39             } 40              41             #form{ 42                 height: 500px; 43                 padding-top: 70px; 44                 background-image: url(../img/regist_bg.jpg); 45                 margin-bottom: 10px; 46             } 47             a{ 48                 text-decoration: none; 49             } 50              51             label.error{ 52                 background:url(../img/unchecked.gif) no-repeat 10px 3px; 53                 padding-left: 30px; 54                 font-family:georgia; 55                 font-size: 15px; 56                 font-style: normal; 57                 color: red; 58             } 59              60             label.success{ 61                 background:url(../img/checked.gif) no-repeat 10px 3px; 62                 padding-left: 30px; 63             } 64              65             #father{ 66                 border: 0px solid white; 67                 padding-left: 307px; 68             } 69              70             #form2{ 71                 border: 5px solid gray; 72                 width: 660px; 73                 height: 450px; 74             } 75              76         </style> 77         <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> 78         <!--引入validate插件js文件--> 79         <script type="text/javascript" src="../js/jquery.validate.min.js" ></script> 80         <!--引入国际化js文件--> 81         <script type="text/javascript" src="../js/messages_zh.js" ></script> 82         <script> 83             $(function(){ 84                 $("#registForm").validate({ 85                     rules:{ 86                         user:{ 87                             required:true, 88                             minlength:3 89                         }, 90                         password:{ 91                             required:true, 92                             digits:true, 93                             minlength:6 94                         }, 95                         repassword:{ 96                             required:true, 97                             equalTo:"[name='password']" 98                         }, 99                         email:{100                             required:true,101                             email:true102                         },103                         username:{104                             required:true,105                             maxlength:5106                         },107                         sex:{108                             required:true109                         }110                     },111                     messages:{112                         user:{113                             required:"用户名不能为空!",114                             minlength:"用户名不得少于3位!"115                         },116                         password:{117                             required:"密码不能为空!",118                             digits:"密码必须是整数!",119                             minlength:"密码不得少于6位!"120                         },121                         repassword:{122                             required:"确认密码不能为空!",123                             equalTo:"两次输入密码不一致!"124                         },125                         email:{126                             required:"邮箱不能为空!",127                             email:"邮箱格式不正确!"128                         },129                         username:{130                             required:"姓名不能为空!",131                             maxlength:"姓名不得多于5位!"132                         },133                         sex:{134                             required:"性别必须勾选!"135                         }136                     },137                     errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label138                     success: function(label) { //验证成功后的执行的回调函数139                         //label指向上面那个错误提示信息标签label140                         label.text(" ") //清空错误提示消息141                             .addClass("success"); //加上自定义的success类142                     }143                 });144             });145         </script>146     </head>147     <body>148         <div id="contanier">149             <div id="top">150                 <div class="top">151                     <img src="../img/logo2.png" height="47px"/>152                 </div>153                 <div class="top">154                     <img src="../img/header.png" height="45px" />155                 </div>156                 <div class="top" id="top1">157                     <a href="#">登录</a>158                     <a href="#">注册</a>159                     <a href="#">购物车</a>160                 </div>161             </div>162             <div id="menu">163                 <a href="#"><font size="5" color="white">首页</font></a>&nbsp;&nbsp;&nbsp;&nbsp;         164                 <a href="#"><font color="white">电脑办公</font></a>&nbsp;&nbsp;&nbsp;&nbsp;  165                 <a href="#"><font color="white">手机数码</font></a>&nbsp;&nbsp;&nbsp;&nbsp;  166                 <a href="#"><font color="white">鞋靴箱包</font></a>    167             </div>168             <div id="form">169                 <form action="#" method="get" id="registForm">170                     <div id="father">171                         <div id="form2">172                             <table border="0px" width="100%" height="100%" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">173                                 <tr>174                                     <td colspan="2" >175                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;176                                         <font size="5">会员注册</font>&nbsp;&nbsp;&nbsp;USER REGISTER 177                                     </td>178                                 </tr>179                                 <tr>180                                     <td width="180px">181                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;182                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;183                                         &nbsp;&nbsp;&nbsp;184                                         <label for="user" >用户名</label>185                                     </td>186                                     <td>187                                         <em>*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="user" size="35px" id="user"/>188                                     </td>189                                 </tr>190                                 <tr>191                                     <td>192                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;193                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;194                                         &nbsp;&nbsp;&nbsp;195                                         密码196                                     </td>197                                     <td>198                                         <em>*</em>&nbsp;&nbsp;&nbsp;<input type="password"  name="password" size="35px" id="password" />199                                     </td>200                                 </tr>201                                 <tr>202                                     <td>203                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;204                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;205                                         &nbsp;&nbsp;&nbsp;206                                         确认密码207                                     </td>208                                     <td>209                                         <em>*</em>&nbsp;&nbsp;&nbsp;<input type="password" name="repassword" size="35px"/>210                                     </td>211                                 </tr>212                                 <tr>213                                     <td>214                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;215                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;216                                         &nbsp;&nbsp;&nbsp;217                                         Email218                                     </td>219                                     <td>220                                         <em>*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="email" size="35px" id="email"/>221                                     </td>222                                 </tr>223                                 <tr>224                                     <td>225                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;226                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;227                                         &nbsp;&nbsp;&nbsp;228                                         姓名229                                     </td>230                                     <td>231                                         <em>*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="username" size="35px"/>232                                     </td>233                                 </tr>234                                 <tr>235                                     <td>236                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;237                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;238                                         &nbsp;&nbsp;&nbsp;239                                         性别240                                     </td>241                                     <td>242                                         <span>243                                             <em>*</em>&nbsp;&nbsp;&nbsp;<input type="radio" name="sex" value="男"/>男244                                             <input type="radio" name="sex" value="女"/>女<em></em>245                                             <label for="sex" class="error"></label>246                                         </span>247                                         248                                     </td>249                                 </tr>250                                 <tr>251                                     <td>252                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;253                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;254                                         &nbsp;&nbsp;&nbsp;255                                         出生日期256                                     </td>257                                     <td>258                                         <em>*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="birthday"  size="35px"/>259                                     </td>260                                 </tr>261                                 <tr>262                                     <td>263                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;264                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;265                                         &nbsp;&nbsp;&nbsp;266                                         验证码267                                     </td>268                                     <td>269                                         <em>*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="yanzhengma" />270                                         <img src="../img/yanzhengma.png"/>271                                     </td>272                                 </tr>273                                 <tr>274                                     <td colspan="2">275                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;276                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;277                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;278                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;279                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;280                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;281                                         <input type="submit" value="注      册" height="50px"/>282                                     </td>283                                 </tr>284                             </table>285                         </div>286                     </div>287                 </form>288             </div>289             <div>290                 <img src="../img/footer.jpg"  width="100%"/>291             </div>292             <div id="bottom">293                 <a href="../案例一:网站信息显示页面/网站信息显示页面.html">关于我们</a>294                 <a href="#">联系我们</a>295                 <a href="#">招贤纳士</a>296                 <a href="#">法律声明</a>297                 <a href="../案例三:网站友情链接显示页面/网站友情链接显示页面.html">友情链接</a>298                 <a href="#">支付方式</a>299                 <a href="#">配送方式</a>300                 <a href="#">服务声明</a>301                 <a href="#">广告声明</a>302                 <p>303                     Copyright © 2005-2016 传智商城 版权所有 304                 </p>305             </div>306         </div>307     </body>308 </html>
校验的完整代码

案例代码总结:此代码中要注意label标签的用法(见代码中),还有验证成功后执行的回调函数的用法(一般是固定的,使用时直接复制粘贴);

相关文章

    无相关信息

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台