b3 - 引入

              
              <!-- jquery.validate/validate.css -->
              <link rel="stylesheet" type="text/css" href="<{xoAppUrl}>modules/ugm_tools2/class/jquery.validate/validate.css">

              <script type="text/javascript" src="<{xoAppUrl}>modules/ugm_tools2/class/jquery.validate/jquery.validate.min.js"></script>

            

b3 - 調用插件

            
              <script type="text/javascript">   
                $( document ).ready( function () {
                  $( "#myForm" ).validate( {
                    submitHandler: function(form) {
                        //驗證成功之後就會進到這邊：
                        //方法一：直接把表單 POST 或 GET 到你的 Action URL
                        //方法二：讀取某些欄位的資料，ajax 給別的 API。
                        //此處測試方法一的寫法如下：
                        form.submit();
                    },
                    rules: {
                      no: "required", //必填
                      money: {
                        required: true,      //必填
                        digits:true          //必须输入整数
                      },
                    },

                    messages: {
                      no: "優惠現金券號碼為必填",
                      money: {
                        required: "優惠現金券金額為必填",
                        digits: "必须输入整数"
                      },
                    },
                    errorElement: "em",
                    errorPlacement: function ( error, element ) {
                      // Add the `help-block` class to the error element
                      error.addClass( "help-block" );

                      // Add `has-feedback` class to the parent div.form-group
                      // in order to add icons to inputs
                      element.closest( "div.form-group" ).addClass( "has-feedback" );

                      //因checkbox、radio，外面多一層 label
                      if ( element.prop( "type" ) === "checkbox" ||  element.prop( "type" ) === "radio") {
                        error.insertAfter( element.parent( "label" ) );
                      } else {
                        error.insertAfter( element );
                      }

                      // Add the span element, if doesn't exists, and apply the icon classes to it.
                      if ( !element.next( "span" )[ 0 ] ) {
                        $( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element );
                      }
                    },
                    success: function ( label, element ) {
                      // Add the span element, if doesn't exists, and apply the icon classes to it.
                      if ( !$( element ).next( "span" )[ 0 ] ) {
                        $( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter(  element );
                      }
                    },
                    highlight: function ( element, errorClass, validClass ) {
                      //驗證失敗要做的事
                      //在父親(div)+ has-error - has-success
                      //在後面(span) + glyphicon-remove - glyphicon-ok

                      $( element ).closest( "div.form-group" ).addClass( "has-error" ).removeClass( "has-success" );
                      $( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
                    },
                    unhighlight: function ( element, errorClass, validClass ) {
                      //驗證成功要做的事
                      $( element ).closest( "div.form-group" ).addClass( "has-success" ).removeClass( "has-error" );
                      $( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
                    }
                  });
                });
              </script>