更改validate默認的驗證不通過提示信息位置

一、問題描述

    使用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());
    }
});