更改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());
    }
});