zoukankan      html  css  js  c++  java

  • 基于Bootstrap+jQuery.validate Form表单验证实践

    基于Bootstrap jQuery.validate Form表单验证实践

    项目结构 ：
     
     
    github 上源码地址：https://github.com/starzou/front-end-example    点击打开
     

    1、form 表单代码

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
    1. <!DOCTYPE html>  
    2. <html>  
    3.     <head>  
    4.         <title>Bootstrap Form Template</title>  
    5.         <meta charset="utf-8" />  
    6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    7.         <link rel="stylesheet" type="text/css" href="plugins/bootstrap/css/bootstrap.css"/>  
    8.     </head>  
    9.     <body>  
    10.         <div class="container">  
    11.             <h1 class="text-center text-danger">Form 示例</h1>  
    12.             <form role="form" class="form-horizontal" action="javascript:alert('验证成功,可以提交.');" method="post">  
    13.                 <div class="form-group">  
    14.                     <label class="col-md-2 control-label" for="name">Name</label>  
    15.                     <div class="col-md-10">  
    16.                         <input class="form-control" name="name" type="text" id="name" placeholder="Name" value="" />  
    17.                     </div>  
    18.                 </div>  
    19.                 <div class="form-group">  
    20.                     <label class="col-md-2 control-label" for="exampleInputPassword1">Password</label>  
    21.                     <div class="col-md-10">  
    22.                         <input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password">  
    23.                     </div>  
    24.                 </div>  
    25.                 <div class="form-group">  
    26.                     <label for="intro" class="control-label col-md-2">Intro</label>  
    27.                     <div class="col-md-10">  
    28.                         <textarea id="intro" class="form-control" rows="3" name="intro" placeholder="Intro"></textarea>  
    29.                     </div>  
    30.                 </div>  
    31.   
    32.                 <div class="form-group">  
    33.                     <label class="control-label col-md-2">Gender</label>  
    34.                     <div class="col-md-10">  
    35.                         <label class="radio-inline">  
    36.                             <input type="radio" name="gender"  value="男" />  
    37.                             boy </label>  
    38.   
    39.                         <label class="radio-inline">  
    40.                             <input type="radio" name="gender"  value="女" />  
    41.                             gril </label>  
    42.                     </div>  
    43.                 </div>  
    44.   
    45.                 <div class="form-group">  
    46.                     <label for="hobby" class="control-label col-md-2">Hobby</label>  
    47.                     <div class="col-md-10">  
    48.                         <div class="checkbox">  
    49.                             <label>  
    50.                                 <input type="checkbox" name="hobby" value="Music">  
    51.                                 Music</label>  
    52.                         </div>  
    53.                         <div class="checkbox">  
    54.                             <label>  
    55.                                 <input type="checkbox" name="hobby" id="" value="Game" />  
    56.                                 Game </label>  
    57.                         </div>  
    58.   
    59.                         <label class="checkbox-inline">  
    60.                             <input type="checkbox" id="inlineCheckbox1" value="option1">  
    61.                             option1 </label>  
    62.                         <label class="checkbox-inline">  
    63.                             <input type="checkbox" id="inlineCheckbox2" value="option2">  
    64.                             option3</label>  
    65.                         <label class="checkbox-inline">  
    66.                             <input type="checkbox" id="inlineCheckbox3" value="option3">  
    67.                             option3 </label>  
    68.                     </div>  
    69.                 </div>  
    70.   
    71.                 <div class="form-group">  
    72.                     <label for="sel" class="control-label col-md-2">Select</label>  
    73.                     <div class="col-md-10">  
    74.                         <select multiple="" id="sel" name="sel" class="form-control">  
    75.                             <option value="1">1</option>  
    76.                             <option value="2">2</option>  
    77.                             <option value="3">3</option>  
    78.                         </select>  
    79.                     </div>  
    80.                 </div>  
    81.   
    82.                 <div class="form-group">  
    83.                     <div class="col-md-offset-2 col-md-10">  
    84.                         <button type="submit" class="btn btn-primary btn-sm">  
    85.                             Submit  
    86.                         </button>  
    87.                         <button type="reset" class="btn btn-primary btn-sm">  
    88.                             Reset  
    89.                         </button>  
    90.                     </div>  
    91.                 </div>  
    92.             </form>  
    93.         </div>  
    94.   
    95.         <script src="plugins/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>  
    96.         <script src="plugins/bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>  
    97.         <script src="plugins/jquery-validation/dist/jquery.validate.js" type="text/javascript" charset="utf-8"></script>  
    98.   
    99.         <script src="scripts/form.js" type="text/javascript" charset="utf-8"></script>  
    100.         <script type="text/javascript" charset="utf-8">  
    101.             MyValidator.init();  
    102.         </script>  
    103.     </body>  
    104. </html>  
    需要引用 jquery.js，bootstrap.js，jquery.validate.js 库
     

    2、form.js 代码

    [javascript] view plaincopy在CODE上查看代码片派生到我的代码片
    1. var MyValidator = function() {  
    2.     var handleSubmit = function() {  
    3.         $('.form-horizontal').validate({  
    4.             errorElement : 'span',  
    5.             errorClass : 'help-block',  
    6.             focusInvalid : false,  
    7.             rules : {  
    8.                 name : {  
    9.                     required : true  
    10.                 },  
    11.                 password : {  
    12.                     required : true  
    13.                 },  
    14.                 intro : {  
    15.                     required : true  
    16.                 }  
    17.             },  
    18.             messages : {  
    19.                 name : {  
    20.                     required : "Username is required."  
    21.                 },  
    22.                 password : {  
    23.                     required : "Password is required."  
    24.                 },  
    25.                 intro : {  
    26.                     required : "Intro is required."  
    27.                 }  
    28.             },  
    29.   
    30.             highlight : function(element) {  
    31.                 $(element).closest('.form-group').addClass('has-error');  
    32.             },  
    33.   
    34.             success : function(label) {  
    35.                 label.closest('.form-group').removeClass('has-error');  
    36.                 label.remove();  
    37.             },  
    38.   
    39.             errorPlacement : function(error, element) {  
    40.                 element.parent('div').append(error);  
    41.             },  
    42.   
    43.             submitHandler : function(form) {  
    44.                 form.submit();  
    45.             }  
    46.         });  
    47.   
    48.         $('.form-horizontal input').keypress(function(e) {  
    49.             if (e.which == 13) {  
    50.                 if ($('.form-horizontal').validate().form()) {  
    51.                     $('.form-horizontal').submit();  
    52.                 }  
    53.                 return false;  
    54.             }  
    55.         });  
    56.     }  
    57.     return {  
    58.         init : function() {  
    59.             handleSubmit();  
    60.         }  
    61.     };  
    62.   
    63. }();  
     
    效果 ：
  • 相关阅读:
    IDE警告信息不应该被忽略
    C#委托使用:多播 ,向委托注册多个方法
    C# random生成随机数全部一样
    使用dynamic动态设置属性值与反射设置属性值性能对比
    git基本使用
    sql server多数据库查询 远程数据库查询
    C# mvc统一通道使用过滤器
    拼凑json的实例
    java常考小程序
    几个触发器的实例
  • 原文地址：https://www.cnblogs.com/ranzige/p/4147060.html
Copyright © 2011-2022 走看看