css - Struts2标签元素如何引入HTML5标签属性和HTML5+CSS表单验证

Question

我们的应用程序中有大量的 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 验证时遇到的问题

下面是我的struts形式

      <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.密码满足给定的模式标准如果是我想把文本变成绿色。

我的 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”在我的表单中没有生效。

Answer 1

我使用带有 struts 标签的 jquery validation-engine 来应用 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，这就是您的解决方案:

How do I specify HTML5 attributes with Struts 2.x? ...

要使用 css，您可以在 struts 标签中为您的 css 类使用 cssClass=""。

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

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