使用validate进行表单验证时土方法(appendTo)改变error显示的位置 _validate

【使用validate进行表单验证时土方法(appendTo)改变error显示的位置】枕上从妨一夜睡，灯前读尽十年诗。这篇文章主要讲述使用validate进行表单验证时土方法(appendTo)改变error显示的位置相关的知识，希望能为你提供帮助。

< span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255); "> 使用validate进行表单验证时会出现error显示位置非所要求位置的现象,此时的解决方法是:< /span>

1.所需要显示error message 的位置定义好无内容的div,并通过设置宽高"占位"(此时可能会用到position:absolute);
2.使用errorPlacement判断哪个error message 放在什么位置,例如,
errorPlacement: function(error, element) {
if(element.attr("id")=="shoujihaoma"){
error.appendTo("#error_message_1");
}
}.
以上就会把输入框id为shuojihaoma的error message 显示在id为error_message_1的位置上.

除了appendTo添加到容器内,还可以使用insertAfter添加到容器后.

自己的代码：javascript

$(document).ready(function() { $("#loginForm").validate({ rules: { validateCode: {remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"} }, messages: { username: {required: "请填写用户名."},password: {required: "请填写密码."}, validateCode: {remote: "验证码不正确.", required: "请填写验证码."} }, errorLabelContainer: "#messageBox", errorPlacement: function(error, element) { error.appendTo($("#loginError").parent()); } }); });

使用js的html代码

< div class="header"> < div id="messageBox" class="alert alert-error ${empty message ? ‘hide‘ : ‘‘}"> < button data-dismiss="alert" class="close"> × < /button> < label id="loginError" class="error"> ${message}< /label> < /div> < p style="text-align:left; padding-left:50px"> < img src="https://www.songbingjia.com/android/${ctxStatic}/bigdata/login/images/3.png" width="117" height="90" > < /p> < /div> < p class="form-signin-heading"> < /p> < form id="loginForm" class="form-signin" action="${ctx}/login" method="post"> < INPUT name="username" class="input-block-level required" id="username" value="https://www.songbingjia.com/android/${username}" type="text" placeholder="请输入登录名"style="height:60px; width:80%; margin-left:60px; margin-top:20px; padding-left:60px; background:url(${ctxStatic}/bigdata/login/images/24.png) 10px 15px no-repeat #FFF" > < INPUT name="password" class="input-block-level required" id="password" type="password" placeholder="请输入密码"style="height:60px; width:80%; margin-left:60px; padding-left:20px; padding-left:60px; background:url(${ctxStatic}/bigdata/login/images/25.png) 10px 18px no-repeat #FFF"> < INPUT class="btn btn-primary" onclick="passwdEncryption(); " type="submit" value="https://www.songbingjia.com/android/登录" style="width:80%; height:50px; margin-left:60px"> & nbsp; & nbsp; < c:if test="${isValidateCodeLogin}"> < div class="validateCode"> < label class="input-label mid" for="validateCode"> 验证码< /label> < sys:validateCode name="validateCode" inputCssStyle="margin-bottom:0; "/> < /div> < /c:if> < LABEL title="下次不需要再登录" for="rememberMe" style=" padding-left:260px; padding-top:20px"> < INPUT name="rememberMe" ${rememberMe ? ‘checked‘ : ‘‘} id="rememberMe" type="checkbox"> 记住我（公共场所慎用）< /LABEL> < /form>

参考链接：https://blog.csdn.net/wobenziyou/article/details/48048339