一、問題描述

    使用validate外掛校驗表單資訊時，當校驗不通過顯示的提示資訊預設是追加在被驗證物件之後的，不美觀。

示例：

二、原因分析

    validate外掛預設的顯示位置。

三、解決措施

     1、在validate(json資料格式)裡面的json資料格式的rules、messages後，增加同級程式碼errorPlacement: function(error, element){}，其中error表示提示資訊的標籤，element代表被校驗的標籤。

     2、根據前面例子裡面可看出，提示資訊的標籤需要新增至被校驗標籤的父標籤的父標籤上（即<div class="form-group"）下，因此可通過提示標籤的appendTo方法來追加標籤。程式碼如下：

errorPlacement:function(error,element){
    error.appendTo(element.parent().parent());
}

      3、validate校驗完整程式碼如下：

$("#registerform").validate({
    rules:{//校驗規則關鍵字
        username:{//需要校驗的輸入框名稱（注意：輸入框只能通過其name屬性獲得，無法通過ID等方式獲得）
   	    required:true,//是否必須填寫
	    rangelength:[3,12]//長度要求
	},
	password:{
	    required:true
	},
	confirmpwd:{
	    required:true,
	    equalTo:"#password"
	}
    },
    messages:{//校驗不通過時的提示資訊
        username:{//與規則裡面的名稱對應
            required:"使用者名稱不能為空！",//校驗不通過的提示資訊（這裡是必填而未填的提示資訊）
            rangelength:$.validator.format("使用者名稱長度在必須為：{0}-{1}之間")//校驗不通過的提示資訊（這裡是長度不符合要求）
        },
        password:{
            required:"密碼不能為空！"
        },
        confirmpwd:{
            required:"確認密碼不能為空！",
            equalTo:"兩次密碼不一致"
        }
    },
    errorPlacement:function(error,element){
    	error.appendTo(element.parent().parent());
    }
});