WebX3表单验证――实践心得

 

• 工作中我们常常会遇到表单验证不通过后的跳转问题，以及跳转后丢失参数的问题，下面我们针对以上问题进行分析及给出解决方案。

表单验证失败处理流程

• uploadAttachment.vm(表单提交) ——> XXXAction(@FormGroup注解执行失败) ——> UploadAttachment.java ——> uploadAttachment.vm

表单验证失败跳转机制

<form action="" method="post" id="upload-attachment-form">
        $csrfToken.hiddenField
        <input type="hidden" name="action" value="project_action"/>
        <input type="hidden" name="event_submit_do_upload_attachment" value="event_submit_do_upload_attachment"/>
        <input type="hidden" name="$group.containerId.key" value="$project.id">
        <input onchange="uploadFile()" style="display:none" id="uploadAttachment" name="$!group.file.key" value="$!group.file.value" type="text"  />
</form>

假如我们当前的url为：
http://localhost:8080/project/upload_attachment.htm?versionId=27437
则上面的表单提交且验证失败后，会根据 form 标签中的 action="" 中的值进行跳转，如果留空则为跳转到当前页面。
根据上面的代码，会跳转到http://localhost:8080/project/upload_attachment.htm?versionId=27437
* 注意 url中带有versionId参数

再来看下面这段代码，为上传附件的表单提交，并进行验证

<form action="" method="post" id="upload-attachment-form" enctype="multipart/form-data">
        $csrfToken.hiddenField
        <input type="hidden" name="action" value="project_action"/>
        <input type="hidden" name="event_submit_do_upload_attachment" value="event_submit_do_upload_attachment"/>
        <input type="hidden" name="$group.containerId.key" value="$project.id">
        <input onchange="uploadFile()" style="display:none" id="uploadAttachment" name="$!group.file.key" value="$!group.file.value" type="file"  />
</form>

假如我们当前的url仍为：
http://localhost:8080/project/upload_attachment.htm?versionId=27437
则上面的表单提交且验证失败后，跳转回的url为http://localhost:8080/project/upload_attachment.htm
* 注意 丢失掉了versionId参数，跳转回的结果不是我们想要的

如何解决二进制表单提交验证不通过后的跳转问题？

如果表单中要上传附件，即带有enctype="multipart/form-data"标签，如下：

<form action="" method="post" id="upload-attachment-form" enctype="multipart/form-data">
        $csrfToken.hiddenField
        <input type="hidden" name="action" value="project_action"/>
        <input type="hidden" name="event_submit_do_upload_attachment" value="event_submit_do_upload_attachment"/>
        <input type="hidden" name="$group.containerId.key" value="$project.id">
        <input type="hidden" name="versionId" value="$project.id">
        <input onchange="uploadFile()" style="display:none" id="uploadAttachment" name="$!group.file.key" value="$!group.file.value" type="file"  />
</form>

则表单中的数据是以二进制文件流的方式提交到后端，会忽略掉url中带入的参数。
将url中所要传递的参数以表单隐藏域的形式进行提交，则问题就会得以解决：
则跳转回http://localhost:8080/project/upload_attachment.htm?versionId=27437这个页面，其中带上了versionId参数。

• 总结： 1.利用好action="XXX"来控制验证不通过后的跳转。
• 2.如果是以二进制的形式传输表单数据，记得要把url中的参数带入到表单中。