2

我正在使用 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>等，但无法生成。

4

1 回答 1

3

首先，把你所有的 HTML 放在它应该在的地方；

其次，用红色边框装饰字段通常是显示验证错误的惯例：例如，格式错误（或超出范围）的日期，数字字段中的字符，强制字段留空，ecc ... Struts2 应该由 执行，最好通过 XML，为标签ValidationInterceptor中的每个字段添加一个错误。<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>
于 2012-12-17T09:39:30.330 回答