23-7 bootstrapvalidator 表單驗證

1. 官網：https://github.com/nghuuphuoc/bootstrapvalidator
2. 引入

   
   	<!-- bootstrap 驗證 -->
     <link rel="stylesheet" href="<{$xoAppUrl}>class/bootstrapValidator/css/bootstrapValidator.css"/>
     <script type="text/javascript" src="<{$xoAppUrl}>class/bootstrapValidator/js/bootstrapValidator.js"></script>

    

3. 調用插件

   
     <script type="text/javascript">
       $(document).ready(function() {
         // Generate a simple captcha
         function randomNumber(min, max) {
             return Math.floor(Math.random() * (max - min + 1) + min);
         };
         $('#captchaOperation').html([randomNumber(1, 50), '+', randomNumber(1, 50), '='].join(' '));
   
         $('#signupForm').bootstrapValidator({
             //live: 'disabled',//
             message: '此值無效',
             feedbackIcons: {
                 valid: 'glyphicon glyphicon-ok',
                 invalid: 'glyphicon glyphicon-remove',
                 validating: 'glyphicon glyphicon-refresh'
             },
             fields: {
               name: {
                 validators: {
                   notEmpty: {
                     message: '必填'
                   }
                 }
               },
               email: {
                 validators: {
                   notEmpty: {
                     message: '必填'
                   },
                   emailAddress: {
                     message: '請輸入正確的email'
                   },
                   remote: {
                     type: 'POST',
                     url: 'index.php?op=ajaxCheckEmail',
                     message: '這個email已經有人使用',
                     delay: 1000
                   }
                 }
               },
               pass: {
                 validators: {
                   notEmpty: {
                     message: '必填'
                   },
                   identical: {
                     field: 'confirmPass',
                     message: '密碼及其確認密碼不一樣'
                   },
                   different: {
                     field: 'email',
                     message: '密碼不能與email相同'
                   }
                 }
               },
               confirmPass: {
                 validators: {
                     notEmpty: {
                       message: '必填'
                     },
                     identical: {
                       field: 'pass',
                       message: '密碼及其確認密碼不一樣'
                     },
                     different: {
                       field: 'email',
                       message: '密碼不能與email相同'
                     }
                 }
               },
               captcha: {
                 validators: {
                   callback: {
                     message: '錯誤的答案',
                     callback: function(value, validator) {
                       var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
                       return value == sum;
                     }
                   }
                 }
               }
             }
         });
   
         $('#loginForm').bootstrapValidator({
             //live: 'disabled',//
             message: '此值無效',
             feedbackIcons: {
                 valid: 'glyphicon glyphicon-ok',
                 invalid: 'glyphicon glyphicon-remove',
                 validating: 'glyphicon glyphicon-refresh'
             },
             fields: {
               email: {
                 validators: {
                   notEmpty: {
                     message: '必填'
                   },
                   emailAddress: {
                     message: '請輸入正確的email'
                   }
                 }
               },
               pass: {
                 validators: {
                   notEmpty: {
                     message: '必填'
                   }
                 }
               }
             }
         });
       });
     </script>

    

4.