struts2+jquery+ajax表单验证

一、常见问题:

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

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


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

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


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

1.struts.xml

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://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

<%@ 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

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

<!DOCTYPE validators PUBLIC "-//Apache Struts//XWork Validator 1.0.2//EN" "http://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

parent = simple

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

<#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

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

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

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://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

<%@ 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">
<div id="main">
    <div 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>
        <div id="tip" style="color:#ffffff;line-height:20px;padding-top:20px;"/>
    </div>
</div>
</s:form>
</body>
</html>

5.com.wogu.jwa.actions.LoginAction

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;
    }
}


  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值