欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

struts2+jquery+ajax表单验证

程序员文章站 2023-01-28 23:31:28
一、常见问题: 1.提示json-default包不存在或拦截器jsonValidationWorkflowStack不存在? 解决:struts2-json-plugin-x...
一、常见问题:

1.提示json-default包不存在或拦截器jsonValidationWorkflowStack不存在?

解决:struts2-json-plugin-xxx.jar

 

2.每验证一次,错误信息就累加一次,出现重复?

解决:如果你整合了spring,请将相应bean的singleton设为false(spring中的bean默认为单例模式,导致前次验证产生的错误信息一直存在)

 

二、Demo1:使用xhtml主题的表单验证

1.struts.xml

[html]  

<?xml version="1.0" encoding="utf-8"?>  

<!DOCTYPE struts PUBLIC  

    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  

    "https://struts.apache.org/dtds/struts-2.0.dtd">  

  

<struts>  

    <package name="admin" extends="json-default" namespace="/admin">  

          

        <action name="login" class="com.wogu.jwa.actions.IndexAction">  

            <result>/WEB-INF/views/login.jsp</result>  

        </action>  

  

        <action name="dologin" class="com.wogu.jwa.actions.LoginAction">  

            <result>/admin/index</result>  

            <result name="input">/WEB-INF/views/login.jsp</result>  

            <interceptor-ref name="jsonValidationWorkflowStack"/>  

        </action>  

    </package>  

</struts>  

 

2./WEB-INF/views/login.jsp

[html]  

<%@ page pageEncoding="utf-8" contentType="text/html; charset=utf-8" %>  

<%@ taglib prefix="s" uri="/struts-tags" %>  

<!DOCTYPE html>  

<html>  

<head>  

    <title>struts2+jquery+Ajax表单验证 - WoguAdmin - power by wogu</title>  

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  

    <!--加入/struts即请求的静态资源-->  

    <script type="text/javascript" src="${pageContext.request.contextPath}/struts/jwa/js/jquery-1.7.1.min.js"></script>  

    <script type="text/javascript" src="${pageContext.request.contextPath}/struts/jwa/js/jquery.form.js"></script>  

    <script language="JavaScript" src="${pageContext.request.contextPath}/struts/utils.js" type="text/javascript"></script>  

    <script language="JavaScript" src="${pageContext.request.contextPath}/struts/xhtml/validation.js" type="text/javascript"></script>  

    <s:head theme="xhtml" />  

</head>  

<body>  

<s:form id="myform" theme="xhtml" namespace="/admin" action="dologin" method="post">  

    <s:textfield name="username" label="用户名"/>  

    <s:textfield name="password" label="密 码"/>  

    <s:submit value=" 登录 "/>  

    <s:reset value=" 清除 "/>  

    <!--只验证,Action类不会被执行到-->  

    <s:hidden name="struts.validateOnly" value="true"/>  

    <!--必须加入-->  

    <s:hidden name="struts.enableJSONValidation" value="true"/>  

</s:form>  

</body>  

</html>  

<script type="text/javascript">  

jQuery('#myform').ajaxForm({  

    'success' : function(errorsObject) {  

        StrutsUtils.clearValidationErrors(myform);  

        if(errorsObject.fieldErrors) {  

            StrutsUtils.showValidationErrors(myform, errorsObject);  

            return false;  

        }  

          

        //validate success  

    }  

});  

</script>  

3.com.wogu.jwa.actions.LoginAction

[java] 

package com.wogu.jwa.actions;  

  

import com.opensymphony.xwork2.ActionSupport;  

  

public class LoginAction extends ActionSupport  

{  

    private String username;  

      

    private String password;  

      

    public String getUsername() {  

        return username;  

    }  

      

    public void setUsername(String username) {  

        this.username = username;  

    }  

      

    public String getPassword() {  

        return password;  

    }  

      

    public void setPassword(String password) {  

        this.password = password;  

    }  

}  

 

4.com/wogu/jwa/actions/LoginAction-validation.xml

[html]  

<!DOCTYPE validators PUBLIC "-//Apache Struts//XWork Validator 1.0.2//EN" "https://struts.apache.org/dtds/xwork-validator-1.0.2.dtd">  

  

<validators>  

      

    <field name="username">  

        <field-validator type="requiredstring">  

            <message>You must enter a name</message>  

        </field-validator>  

    </field>  

      

    <field name="password">  

        <field-validator type="requiredstring">  

            <message>You must enter a password</message>  

        </field-validator>  

    </field>  

</validators>  

 

5.访问127.0.0.1:8080/admin/login

 

三、demo2:灵活的表单验证

1.创建自定义主题classpath/template/jwa

1-1.classpath/template/jwa/theme.properties

[plain] view plaincopy

parent = simple  

 

1-2.classpath/template/jwa/form-close.ftl

[html]  

<#if parameters.validate == true>  

    <input type="hidden" name="struts.enableJSONValidation" value="true"/>  

</#if>  

<#if parameters.dynamicAttributes.validateOnly?default("false") == "true">  

    <input type="hidden" name="struts.validateOnly" value="true"/>  

</#if>  

<#include "/${parameters.templateDir}/simple/form-close.ftl" />  

<#if parameters.validate == true>  

<script type="text/javascript" src="${base}/struts/jwa/js/jquery.form.js"></script>  

<script type="text/javascript" src="${base}/struts/jwa/js/validation.js"></script>  

<script type="text/javascript">  

$(document).ready(function() {  

    jQuery('#${parameters.id}').ajaxForm({  

        'success' : function(data, status, xhr, form) {  

            if(hasValidationErrors(data)) {  

                showValidationErrors(data, form);  

            } else {  

                location.href = form.attr('forward');  

            }  

        }  

    });  

});  

</script>  

</#if>  

1-3.classpath/template/jwa/js/validation.js

[javascript]  

function hasValidationErrors(data) {  

    if(data.errors || data.fieldErrors)  

        return true;  

    else  

        return false;  

}  

  

function showValidationErrors(data, form) {  

    var formid = form.attr('id');  

    var actionErrorWrap = $('#'+form.attr('actionErrorId'));  

    var actionErrorWrapExist = actionErrorWrap.length > 0;  

    if(actionErrorWrapExist) {  

        actionErrorWrap.html('');  

    }  

      

    if(data.errors) {  

        for(var i in data.errors) {  

            if(!actionErrorWrapExist)  

                alert(data.errors[i]);  

            else  

                actionErrorWrap.append('<p>'+data.errors[i]+'</p>');  

        }  

    }  

      

    if(data.fieldErrors) {  

        for(var i in data.fieldErrors) {  

            var error = data.fieldErrors[i].toString();  

            var field = $('#'+formid+'_'+i);  

            var fieldErrorWrap = $('#'+field.attr('fieldErrorId'));  

            if(fieldErrorWrap.length > 0) {  

                fieldErrorWrap.html(error);  

            } else if(actionErrorWrapExist) {  

                actionErrorWrap.append('<p>'+error+'</p>');  

            } else {  

                alert(error);  

            }  

        }  

    }  

}  

 

2.创建com.wogu.jwa.AjaxAction

[java] 

package com.wogu.jwa;  

  

import java.util.*;  

  

import com.opensymphony.xwork2.ActionSupport;  

  

public class AjaxAction extends ActionSupport  

{  

    public static final String AJAX = "ajax";  

      

    private Map<String, Object> ajaxErrors = new HashMap<String, Object>();  

      

    public Map<String, Object> getAjaxErrors() {  

        Collection<String> errors = getActionErrors();  

        if(errors.size() > 0) {  

            ajaxErrors.put("errors", errors);  

        }  

          

        Map<String, List<String>> fieldErrors = getFieldErrors();  

        if(fieldErrors.size() > 0) {  

            ajaxErrors.put("fieldErrors", fieldErrors);  

        }  

          

        return ajaxErrors;  

    }  

}  

 

3.struts.xml

[html] 

<?xml version="1.0" encoding="utf-8"?>  

<!DOCTYPE struts PUBLIC  

    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  

    "https://struts.apache.org/dtds/struts-2.0.dtd">  

  

<struts>  

    <package name="admin" extends="json-default" namespace="/admin">  

  

        <action name="login" class="indexAction">  

            <result>/WEB-INF/views/login.jsp</result>  

        </action>  

  

        <action name="dologin" class="loginAction">  

            <result name="ajax" type="json">  

                <param name="root">ajaxErrors</param>  

            </result>  

            <result name="input">/WEB-INF/views/login.jsp</result>  

            <interceptor-ref name="jsonValidationWorkflowStack"/>  

        </action>  

    </package>  

</struts>  

 

4./WEB-INF/views/login.jsp

[html]  

<%@ page pageEncoding="utf-8" contentType="text/html; charset=utf-8" %>  

<%@ taglib prefix="s" uri="/struts-tags" %>  

<!DOCTYPE html>  

<html>  

<head>  

    <title>struts+jquery+Ajax表单验证 - power by wogu</title>  

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  

    <link href="favicon.ico" rel="shortcut icon">  

    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/struts/jwa/css/style.css">  

    <script type="text/javascript" src="${pageContext.request.contextPath}/struts/jwa/js/jquery-1.7.1.min.js"></script>  

</head>  

<body>  

<s:form id="myform" theme="jwa" validate="true" actionErrorId="tip" namespace="/admin" action="dologin" method="post" forward="${pageContext.request.contextPath}/admin/index">  

<p id="main">  

    <p id="login_box">  

        <ul>  

            <li>用户名:<s:textfield name="username"/></li>  

            <li>密 码:<s:textfield name="password"/></li>  

            <li style="padding-left:48px;">  

                <s:submit value=" 登录 " cssClass="btn"/>  

                <s:reset value=" 清除 " cssClass="btn"/>  

            </li>  

            <li style="padding-left:48px;"><a href="#"><img src="${pageContext.request.contextPath}/struts/jwa/images/top_qq_login1.gif" border="0" style="vertical-align:middle;"/></a></li>  

        </ul>  

        <p id="tip" style="color:#ffffff;line-height:20px;padding-top:20px;"/>  

    </p>  

</p>  

</s:form>  

</body>  

</html>  

 

5.com.wogu.jwa.actions.LoginAction

[java]  

package com.wogu.jwa.actions;  

  

import com.wogu.jwa.AjaxAction;  

import com.opensymphony.xwork2.ActionContext;  

  

public class LoginAction extends AjaxAction  

{  

    private String username;  

      

    private String password;  

      

    public String getUsername() {  

        return username;  

    }  

      

    public void setUsername(String username) {  

        this.username = username;  

    }  

      

    public String getPassword() {  

        return password;  

    }  

      

    public void setPassword(String password) {  

        this.password = password;  

    }  

      

    public String execute() {  

        if(username.equals("test") && password.equals("123456")) {  

            ActionContext.getContext().getSession().put("userid", "1");  

        } else {  

            addActionError(getText("loginAction.user_or_password.error"));  

        }  

          

        return AJAX;  

    }  

}