給表單引數新增驗證（jQuery庫的使用）

準備工作：

引入jQuery庫
引入bootstrap庫
引入jQuery validate庫

js檔案：

var Register = function() {
     return {
           // main function to initiate the module
          init : function() {
               // 字元驗證   
              jQuery.validator.addMethod( "stringCheck", function(value, element)
 
 {      
                        return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);      
                    }, "只能包括中文字、英文字母、數字和下劃線" );
               // 手機號碼驗證      
              jQuery.validator.addMethod( "isMobile", function(value, element) {      
                  var length = value.length;  
                  var
 
 mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/ ;  
                  return this .optional(element) || (length == 11 && mobile.test(value));      
              }, "請正確填寫您的手機號碼" );  
               // 密碼驗證   
              jQuery.validator.addMethod( "isPassword", function(value, element) {      
                  var
 
 mobile = /^[A-Za-z0-9]+$/ ;  
                  return this .optional(element) || mobile.test(value);      
              }, "密碼只能包括數字和字母" );
               //顯示驗證
              $( '.register-form').show();
              $( '.register-form').validate({
                   errorElement : 'label', // default input error message container
                   errorClass : 'help-inline', // default input error message class
                   focusInvalid : false, // do not focus the last invalid input
                   ignore : "",
                   rules : {
                        userName : {
                             required : true,
                             rangelength : [fields.min_username_length,fields.max_username_length],// 使用者名稱長度在3~64之間
                             stringCheck : true,
                             remote : { //非同步傳送請求到伺服器，驗證userName
                                  type : "post",
                                   //url : "/adminUser/authName.do",//需要伺服器controllor 中提供使用者名稱檢查的方法
                                  data : {
                                      userName : function() {
                                            return $("#userName").val();
                                      }
                                  },
                             }
                        },
                        password : {
                             required : true,
                             minlength : fields.min_password_length,
                             maxlength : fields.max_password_length,
                             isPassword : true
                        },
                        passwordConfirm : {
                             equalTo : "#register_password" ,
                        },
                        mailbox : {
                             required : true,
                             email : true
                        },
                        nickName : {
                             maxlength : fields.max_nickname_length,
                        },
                        phone : {
                             required : true,
                             number : true,
                             minlength : fields.phonenum_length,
                             isMobile : true
                        },
                   },
                   messages : { // 定義驗證資訊
                        userName : {
                             required : "使用者名稱必填" ,
                             rangelength : $.validator.format("輸入的範圍在 {0}-{1} 之間的數字、字元、下劃線." ),
                             remote :  "使用者名稱存在" ,// 返回false時的提示資訊
                        },
                        password : {
                             required : "密碼必填" ,
                             minlength : "您輸入的數字或者字元太少，最少為6" ,
                             maxlength : "密碼不能超過16位" ,
                        },
                        passwordConfirm : {
                             equalTo : "兩次輸入的密碼不一致" ,
                        },
                        mailbox : {
                             required : "郵箱必填" ,
                             email : "您輸入的郵箱不合法，請重新輸入" ,
                        },
                        nickName : {
                             maxlength : "您輸入的暱稱已經給你超過最大長度20" ,
                        },
                        phone : {
                             required : "手機號必填" ,
                             number : "手機號只能是數字" ,
                             minlength : "您輸入的手機號長度不正確" ,
                        }
                   },
                   invalidHandler : function(event, validator) { // display error alert on form submit
                   },
                   highlight : function(element) { // hightlight error inputs
                        $(element).closest( '.control-group').addClass('error' ); // set errorclass to the control group
                   },
                   success : function(label) {
                        label.closest( '.control-group').removeClass('error' );
                        label.remove();
                   },
                   onsubmit: false,//預設表單提交
              });
          }
     };
}();

呼叫的方法( HTML中)

<form class= "form-vertical register-form" action="/adminUser/register.do" method="post">
               <input type= "hidden" id ="hiddenSpace" />
               <h3 class= "">使用者註冊 </h3>
               <!-- 返回錯誤提示資訊 -->
               <div>
                    <c:choose>
                         <c:when test= "${ response.result == 'true' }" >
                         </c:when>
                         <c:otherwise>
                                   <span class="register_error" >${ response.message} </span>
                         </c:otherwise>
                    </c:choose>
               </div>
               <!-- 返回錯誤提示資訊 -->
               <div class= "control-group">
                    <label class= "control-label visible-ie8 visible-ie9"> 使用者名稱</label >
                    <div class= "controls">
                         <div class= "input-icon left">
                              <i class= "icon-user"></i > <input class= "m-wrap placeholder-no-fix" type="text" placeholder="使用者名稱" name="userName" id= "userName" />
                         </div>
                         <span id= "namespan"></span >
                    </div>
               </div>
               <div class= "control-group">
                    <label class= "control-label visible-ie8 visible-ie9"> 密碼</label >
                    <div class= "controls">
                         <div class= "input-icon left">
                              <i class= "icon-lock"></i > <input class= "m-wrap placeholder-no-fix" type="password" id="register_password" placeholder= "密碼" name ="password" />
                         </div>
                    </div>
               </div>
               <div class= "control-group">
                    <label class= "control-label visible-ie8 visible-ie9"> 再次輸入密碼</label >
                    <div class= "controls">
                         <div class= "input-icon left">
                              <i class= "icon-ok"></i > <input class= "m-wrap placeholder-no-fix" type="password" placeholder="確認密碼" name="passwordConfirm" />
                         </div>
                    </div>
               </div>
               <div class= "control-group">
                    <!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
                    <label class= "control-label visible-ie8 visible-ie9"> 郵箱</label >
                    <div class= "controls">
                         <div class= "input-icon left">
                              <i class="icon-envelope" ></i> < input class ="m-wrap placeholder-no-fix" type= "text" placeholder ="郵箱" name="mailbox" />
                         </div>
                    </div>
               </div>
               <div class= "control-group">
                    <label class= "control-label visible-ie8 visible-ie9"></ label>
                    <div class= "controls">
                         <div class= "input-icon left">
                              <i class= "icon-cloud"></i > <input class= "m-wrap placeholder-no-fix" type="text" placeholder="暱稱" name="nickName" />
                         </div>
                    </div>
               </div>
               <div class= "control-group">
                    <label class= "control-label visible-ie8 visible-ie9"></ label>
                    <div class= "controls">
                         <div class= "input-icon left">
                              <i class= "icon-phone"></i > <input class= "m-wrap placeholder-no-fix" type="text" placeholder="手機號" name="phone" />
                         </div>
                    </div>
               </div>
               <div class= "form-actions">
                    <button type= "submit" id="register-submit-btn" class="btn green pull-right">
                        註冊 <i class= "m-icon-swapright m-icon-white"></ i>
                    </button>
               </div>
           </form>

以及對js檔案的引入：

  <script >
          jQuery(document).ready( function() {
              App.init();
              Register.init();
          });    
  </script >