Question

我正在使用struts2开发一个网页。我想用红色边框突出显示我的用户ID /密码文本字段，并在用户名/密码错误的情况下显示错误消息

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<title>Stock Portfolio Management</title>
</head>
<FONT COLOR=black><marquee BEHAVIOR=ALTERNATE><h1 ALIGN="center">STOCK PORTFOLIO</h1></marquee></FONT>
 <style type="text/css">
body
{
/* background: url(./image/9.jpg) no-repeat fixed;  */
    /* -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; */
    postion:fixed
}
img
{
position:fixed;
bottom: 20%;
left: 20%;
margin-top: -50px;
margin-left: -100px;
}
#login
{
position:fixed;
top: 20%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
} 
.errors {
background-color:#FFCCCC;
    border:1px solid #CC0000;
    width:350px;
    margin-bottom:2px;
    position:relative;
    left:0pt;
    bottom:10pt;

}

.errors li{ 
    list-style: none; 
}
</style>
<body>
<img src="image/9.jpg" height="250" width="300">
<s:form id="login" action="authenticate" method="post">
    <s:textfield name="userid" key="User Id" size="25" />
    <s:password name="password" label="Password" size="25" />

    <s:if test="hasActionErrors()">
    <div class="errors">
      <s:actionerror/>
   </div>
   </s:if> 

   <s:submit method="CheckUser" value="Login" align="center" />  <s:reset value="Reset" align="center" />
    <a href="<s:url action="moveregister" method="execute"/>">New User?</a>
    &nbsp
    <a href="<s:url action="forgotpassword" method="forgot"/>">Forgot Password?</a>
</s:form>
</body>
</html>

这就是我在动作类中的内容：

addActionError(getText("User Id which you provided doesnt exists"));
return "error";

如您所见，我正在使用.errors捕捉错误并在屏幕上显示，并使用上面的CSS格式化它。

但是我想突出显示带有红色边框的错误，如果错误或密码字段是错误，则说明userID字段。我尝试使用谷歌搜索，发现很多东西，如编辑模板class/<s:fielderror>等，但无法生成。

Answer 1

首先，将所有HTML放在原来的位置;

其次，使用红色边框去除字段通常是显示验证错误的约定：例如，格式错误（或超出范围）日期，数字字段中的字符，必填字段留空，ecc ... Struts2中的验证应该由ValidationInterceptor执行，最好是通过XML执行，为<s:fielderrors/>标记中的每个字段添加一个错误。您的情况不同：您通过验证，执行Action的方法，但结果是“用户未经过身份验证”：在大多数Web应用程序中，这会导致出现红色错误消息，而不会删除用户名和密码字段（如果它们留空，你应该去装饰它们。）。

但是，如果你想要去除它们，为什么不使用Javascript？

以CSS样式添加：

.decoratedErrorField{
    border:2px solid red;
}

在您的字段中添加ID：

<s:textfield name="userid" id="userid" key="User Id" size="25" />
<s:password name="password" id="password" label="Password" size="25" />

如果发生错误，请按ID获取字段，并通过向其添加错误类来对其进行解析; 在页面末尾添加此内容，就在</body>：

之前

<s:if test="hasActionErrors()">
    <script type="text/javascript">
        //<![CDATA[                 
            document.getElementById("userid").className += " decoratedErrorField ";
            document.getElementById("password").className += " decoratedErrorField ";
        //]]>
    </script>       
</s:if>

在struts2中突出显示带有红色边框的TextField

1 个答案: