jQuery的validate.js表单验证插件如何使用(代码示例)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是介绍jQuery的validate.js表单验证插件如何使用(代码示例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

效果:

jQuery的validate.js表单验证插件如何使用(代码示例)

代码:

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>表单验证插件Validate</title>     <script src="js/jquery-1.10.2.min.js"></script>     <script src="js/jquery.validate.min.js"></script>     <style>         body {             background-color: #000;         }                  form {             width: 361px;             margin: 80px auto;             padding: 50px;             border: 2px solid #666;             box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);             background-color: #999;             border-radius: 10px;             box-sizing: border-box;         }                  form>p {             margin-bottom: 20px;             color: #fff;         }                  form>p>label {             display: inline-block;             width: 80px;             text-align: center;         }                  label.error {             display: block;             width: 100%;             color: rgb(189, 42, 42);             font-size: 12px;             text-align: right;             margin-top: 5px;         }                  input {             width: 170px;             height: 20px;             outline: none;             background-color: #ddd;             border: 1px solid #ddd;             border-radius: 4px;         }                  .submit {             width: 170px;             margin: 30px auto 0;         }                  .submit input {             background-color: #0099aa;             color: #fff;             border: 0;             padding: 5px;             height: 30px;         }     </style> </head>  <body>     <form id="signupForm" action="" method="post">         <p>             <label for="name">姓名:</label>             <input type="text" id="name" name="name">         </p>         <p>             <label for="email">邮箱:</label>             <input type="email" id="email" name="email">         </p>         <p>             <label for="password">密码:</label>             <input type="password" id="password" name="password">         </p>         <p>             <label for="confirm_password">确认密码:</label>             <input type="password" id="confirm_password" name="confirm_password">         </p>         <p class="submit">             <input type="submit" value="提交">         </p>     </form> </body> <script>     $(function() {         $("#signupForm").validate({             rules: {                 name: "required",                 email: {                     required: true,                     email: true                 },                 password: {                     required: true,                     minlength: 5                 },                 confirm_password: {                     required: true,                     minlength: 5,                     equalTo: "#password"                 }             },             messages: {                 name: "请输入姓名",                 email: {                     required: "请输入Email地址",                     email: "请输入正确的Email地址"                 },                 password: {                     required: "请输入密码",                     minlength: "密码不能小于5个字符"                 },                 confirm_password: {                     required: "请输入确认密码",                     minlength: "确认密码不能小于5个字符",                     equalTo: "两次输入的密码不一致"                 }             }         });     }) </script>  </html>
本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » jQuery的validate.js表单验证插件如何使用(代码示例)

发表评论

提供最优质的资源集合

立即查看 了解详情