ajax验证并提交表单的两种方法

我们的目的是，当用户在页面点击提交的时候，希望先通过ajax验证。如果验证失败，则给出提示信息，并要求用户重新选择再提交；如果验证成功，则把form表单及其数据提交到后台。

我们通过提交数据的按钮有两种形式，一种是button，另一种是submit。验证和提交的顺序，button的方式一般是获取点击事件，进行验证，验证通过，获取form对象，提交form表单数据；submit的方式一般是获取点击事件，验证，验证通过，提交form表单数据。具体如下。

button方式：

1.建立待提交的form表单
    <form action="Property_showName" id="checkNameForm">
        <select id="name" name="selectedName">
            <option value="lcz">
                lcz
            </option>
            <option value="lisi">
                lisi
            </option>
        </select>
        <input type="button" value="checkNameButton" id="checkNameButton">
    </form>

2.进行验证

$(function()
    {
        $("#checkNameButton").click(function()
        {
            $.post("Property_checkName.action",{name: $("#name").val()},
                function(returnedData, status)
                {
                    var flag = returnedData.flag;
                    if (!flag)
                    {
                        alert("不是一个有效的名字！")
                        return;
                    }
                    
                    var form = document.getElementById("checkNameForm");
                    form.submit();
                });            
        });
    });

submit方式：

1.建立待提交的form表单

<form action="Property_showName" οnsubmit="return validate_form(this);">
        <select id="name" name="selectedName">
            <option value="lcz">
                lcz
            </option>
            <option value="lisi">
                lisi
            </option>
        </select>
        <input type="submit" value="checkNameSubmit">
    </form>

2.进行验证

function validate_name(field,alerttxt)
    {
        with (field)
        {
            var flag = false;
            $.ajax({
                type:"POST",
                url:"Property_checkName.action",
                async:false,
                data:"name=" + value,
                success: function(data)
                {
                    flag = data.flag;
                },
                dataType: "json"
            });
            if(!flag)
            {
                alert(alerttxt);
            }
            return flag;
        }
    }
    
    function validate_form(thisform)
    {
        with (thisform)
        {
            if (validate_name(selectedName,"Not a valid name!")==false)
            {
                  selectedName.focus();
                  return false;
            }
        }
    }

3.公共前提配置

3.1 web.xml

    <filter>
        <filter-name>struts2</filter-name>
        <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
    </filter>

    <filter-mapping>
        <filter-name>struts2</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

3.2 struts.xml

    <action name="Property_showName" class="cn.com.yongzhi.ajax.action.PropertyAction" >
        <result name="success" >checkPropertySuccess.jsp</result>
    </action>
    
    <action name="Object_checkName" class="cn.com.yongzhi.ajax.action.ObjectAction" method="checkName">
        <result name="success" type="json">
            <param name="includeProperties">
                 flag
            </param>
        </result>
    </action>
    
    <action name="Object_showName" class="cn.com.yongzhi.ajax.action.ObjectAction" >
        <result name="success" >checkObjectSuccess.jsp</result>
    </action>

3.3 action中的操作

public String checkName() {
        if ("lcz".equals(name)) {
            flag = true;
            System.out.println("验证成功：" + flag);
        } else {
            flag = false;
            System.out.println("验证失败：" + flag);
        }

        return SUCCESS;
    }

    @Override
    public String execute() throws Exception {
        return SUCCESS;
    }

具体的代码可以参考“ajax验证并提交表单的两种方法博客源码”：http://download.csdn.net/detail/linchengzhi/4288546 点击打开链接

该代码不断有针对上面提到的property验证，也有针对object验证。

该代码在myeclipse8.5和apache-tomcat-6.0.30测试通过。