0

我们在我们的应用程序中使用了广泛的 struts2。现在具有挑战性的任务是删除所有 struts2 默认验证并引入带有 Css 验证的 HTML5。

struts2 表单示例

<s:form id="userForm" action="userAction" method="post" validate="true">
   <s:password key="Pwd" required="true" maxlength="128" />
 </s:form>

在这个我想使用 HTML5 属性“type=password”和“required”和 pattern="(?=. \d)(?=. [a-zA-Z])\w{7,}" 并且想要对所有这些进行 CSS 验证。我怎样才能做到这一点。用示例或任何相关教程进行解释更受赞赏。

我希望这能解释我在使用 css 验证时遇到的问题

波纹管是我的支柱形式

      <s:form id="userForm" action="userAction" method="post" validate="true">
       <s:password key="Pwd" type="email" required="true" maxlength="128" id="password"             pattern="(?=.*\d)(?=.*[a-zA-Z])\w{7,}"/>
       <span class="form_hint">Password should contain,</br> 
                1.minimum of 7 characters. </br> 
                2. Must consist of only letters and digits.</br> 
                3.At least one letter and at least one digit</span>
       </s:submit type="button"> 
     </s:form>

我想验证此密码字段 1.required 表示用户在提交之前输入或未输入，2.password 是否符合给定的模式标准，如果是我想将文本变为绿色。

我的CSS如下，

 .form_hint {
        background: #d45252;
        border-radius: 3px 3px 3px 3px;
        color: white;
        margin-left:8px;
        padding: 1px 6px;
        z-index: 999; 
        position: absolute;
        display: none;
    }

    .form_hint::before {
        content: "\25C0"; 
        color:#d45252;
        position: absolute;
        top:1px;
        left:-6px;
    }
    #emailId input:focus + .form_hint {
        display: inline;
    }

    #emailId input:required:valid + .form_hint { 
        background: #28921f;
    }

    #emailId input:required:valid + .form_hint::before {
        color:#28921f;
    }

但是在屏幕上，当我单击密码无效的提交按钮时，只有 HTML5 模式标记属性正在处理诸如“请输入所需格式”之类的消息。如何使我的 CSS 有效。我必须在我的 CSS 文件中使用什么语法。我的意思是“#emailId input:focus + .form_hint”、“#emailId input:required:valid + .form_hint”、“#emailId input:required:valid + .form_hint::before”在我的表单中没有生效。

4

2 回答 2

2

我已经使用带有 struts 标记的 jquery 验证引擎来应用 css 验证并成功实现它。

这是我为 jquery-validation 引擎遵循的教程的链接：

http://www.skill-guru.com/blog/2010/04/18/jquery-validation-tutorial/

这就是我的 struts 标签的样子:)

  <s:textfield name="tenant.shortName" label="Short Name" labelSeparator=" " id="shortName" maxlength="3"
                    cssClass="validate[required,custom[noSpecialCaracters]] text-input"></s:textfield>

编辑 好，所以如果你坚持使用 html5，这就是你的解决方案：

如何使用 Struts 2.x 指定 HTML5 属性？...

对于使用 css，您可以在 css 类的 struts 标记中使用 cssClass=""。

请注意，跨度在内部不起作用，因为当它被 taglib 扩展时，它会像表格<s:form>一样蓬勃发展。<s:form>它永远不会与扩展的 html 代码中的密码相邻。

一个建议：您可以使用 title 属性在鼠标悬停时显示您想要显示的内容.. 或<s>标签中的 tooltip 属性

于 2013-09-20T07:11:41.387 回答
0

您可能正在使用默认的 XHTML Theme，它将为您生成额外的 HTML（<fieldset>例如）。

然后

  1. 切换到Simple Theme，以获得对生成的 HTML 的完全控制，
  2. 或者，由于您的两个字段不再相邻，请使用~( General Sibling Combinator ) 而不是+( Adjacent Sibling Combinator )。
于 2013-09-20T10:07:00.190 回答