打赏

jQuery使用简单示例 validate 插件

摘录自：http://blog.csdn.net/u010320371/article/details/51104783
用户登录

 

 

 

 

[html] view plain copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title>jQuery Validation 插件</title>  
  6.     <link rel="stylesheet" href="style.css"/>  
  7. </head>  
  8. <body>  
  9. <form id="demoForm">  
  10.     <fieldset>  
  11.         <legend>用户登录</legend>  
  12.         <p id="info"></p>  
  13.   
  14.         <p>  
  15.             <label for="username">用户名</label>  
  16.             <input type="text" id="username" name="username"/>  
  17.         </p>  
  18.   
  19.         <p>  
  20.             <label for="password">密码</label>  
  21.             <input type="password" id="password" name="password"/>  
  22.         </p>  
  23.   
  24.         <p>  
  25.             <label for="confirm-password">确认密码</label>  
  26.             <input type="password" id="confirm-password" name="confirm-password"/>  
  27.         </p>  
  28.   
  29.         <p>  
  30.             <input type="submit" value="登录"/>  
  31.         </p>  
  32.     </fieldset>  
  33. </form>  
  34.   
  35. <script src="vendor/jquery-1.10.0.js"></script>  
  36. <script src="vendor/jquery.validate-1.13.1.js"></script>  
  37. <script>  
  38.     var validator1;  
  39.     $(document).ready(function () {  
  40.         validator1 = $("#demoForm").validate({  
  41.             debug: true,  
  42.             rules: {  
  43.                 username: {  
  44.                     required: true,  
  45.                     minlength: 2,  
  46.                     maxlength: 10  
  47.                 },  
  48.                 password: {  
  49.                     required: true,  
  50.                     minlength: 2,  
  51.                     maxlength: 16  
  52.                 },  
  53.                 "confirm-password": {  
  54.                     equalTo: "#password"  
  55.                 }  
  56.             },  
  57.             messages: {  
  58.                 username: {  
  59.                     required: '请输入用户名',  
  60.                     minlength: '用户名不能小于2个字符',  
  61.                     maxlength: '用户名不能超过10个字符',  
  62.                     remote: '用户名不存在'  
  63.                 },  
  64.                 password: {  
  65.                     required: '请输入密码',  
  66.                     minlength: '密码不能小于2个字符',  
  67.                     maxlength: '密码不能超过16个字符'  
  68.                 },  
  69.                 "confirm-password": {  
  70.                     equalTo: "两次输入密码不一致"  
  71.                 }  
  72.   
  73.             },  
  74.   
  75.             highlight: function(element, errorClass, validClass) {  
  76.                 $(element).addClass(errorClass).removeClass(validClass);  
  77.                 $(element).fadeOut().fadeIn();  
  78.             },  
  79.             unhighlight: function(element, errorClass, validClass) {  
  80.                 $(element).removeClass(errorClass).addClass(validClass);  
  81.             },  
  82.             submitHandler: function (form) {  
  83.                 console.log($(form).serialize())  
  84.             }  
  85.         });  
  86.   
  87.         $("#check").click(function () {  
  88.             console.log($("#demoForm").valid() ? "填写正确" : "填写不正确");  
  89.         });  
  90.     });  
  91. </script>  
  92.   
  93. </body>  
  94. </html>  

 

[html] view plain copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title>jQuery Validation 插件</title>  
  6.     <link rel="stylesheet" href="style.css"/>  
  7.     <script src="/Public/js/jquery-1.10.0.js"></script>  
  8.     <script src="/Public/js/jquery.validate-1.13.1.js"></script>  
  9. </head>  
  10. <body>  
  11. <form id="demoForm">  
  12.     <fieldset>  
  13.         <legend>用户登录</legend>  
  14.         <p id="info"></p>  
  15.   
  16.         <p>  
  17.             <label for="username">用户名</label>  
  18.             <input type="text" id="username" name="username"/>  
  19.         </p>  
  20.   
  21.         <p>  
  22.             <label for="password">密码</label>  
  23.             <input type="password" id="password" name="password"/>  
  24.         </p>  
  25.           
  26.         <p>  
  27.             <label for="confirm-password">确认密码</label>  
  28.             <input type="password" id="confirm-password" name="confirm-password"/>  
  29.         </p>  
  30.           
  31.         <p>  
  32.             <label for="email">邮箱</label>  
  33.             <input type="text" id="email" name="email"/>  
  34.         </p>  
  35.           
  36.         <p>  
  37.             <label for="phone">手机</label>  
  38.             <input type="text" id="phone" name="phone"/>  
  39.         </p>  
  40.   
  41.         <p>  
  42.             <input type="submit" value="登录"/>  
  43.         </p>  
  44.     </fieldset>  
  45. </form>  
  46.   
  47. <script>  
  48.   
  49.     $(document).ready(function(){  
  50.         $("#demoForm").validate({  
  51.             rules:{  
  52.                 username:{  
  53.                     required:true,  
  54.                     minlength:2,  
  55.                     maxlength:10,  
  56.                 },  
  57.                 password:{  
  58.                     required:true,  
  59.                     minlength:2,  
  60.                     maxlength:16,  
  61.                 },  
  62.                 email:{  
  63.                     required:true,  
  64.                     email:true,  
  65.                 },  
  66.                 phone:{  
  67.                     required:true,  
  68.                     rangelength:[11,11],  
  69.                     number:true  
  70.                 },  
  71.                 "confirm-password":{  
  72.                     equalTo:"#password"  
  73.                 }  
  74.             },  
  75.             messages:{  
  76.                 username:{  
  77.                     required:'请输入用户名！',  
  78.                     minlength:'最小为两个字符！',  
  79.                     maxlength:'最大为十个字符！'  
  80.                 },  
  81.                 password:{  
  82.                     required:'请输入密码！',  
  83.                     minlength:'最小为两个字符！',  
  84.                     maxlength:'最大为十六个字符！'  
  85.                 },  
  86.                 email:{  
  87.                     required:'邮箱必填！',  
  88.                     email:'email格式填写不正确!'  
  89.                 },  
  90.                 phone:{  
  91.                     required:'请输入手机号码！',  
  92.                     rangelength:'手机号码为11位',  
  93.                     number:'手机号必须为数字'  
  94.                       
  95.                 },  
  96.                 'confirm-password':{  
  97.                     equalTo:'两次输入密码不一致！'  
  98.                 }  
  99.                   
  100.             },  
  101.               
  102.             submitHandler: function(form){   //表单提交句柄,为一回调函数，带一个参数：form     
  103.                 alert("提交表单");     
  104.                  
  105.             },   
  106.         });  
  107.     });  
  108. </script>  
  109.   
  110.   
  111. </body>  
  112. </html>  
posted @ 2016-12-16 21:57  海米傻傻  阅读(326)  评论(0)  编辑  收藏  举报