114网址导航博客访问： 118982
博文数量： 49
注册时间：
鏆傛棤浠嬬粛
ITPUB论坛APP
ITPUB论坛APP
APP发帖 享双倍积分
IT168企业级官微
微信号：IT168qiye
系统架构师大会
微信号：SACC2013
分类： 数据库开发技术
创建Web应用的过程中，验证用户在HTML表单中的输入是最常见的一个问题。用户输入数据必须被验证从而保证进行业务处理之前数据是正确的。输入的表单数据可能用于创建或更新数据库条目、调用Web服务、或作为业务过程的输入。基于目前由Struts提供的表单验证框架，页面流提供了一种简单易用的服务端验证方式。[@more@]页面流验证提供以下功能：· 用户表单输入的服务端验证· 用待验证的表单bean封装验证逻辑· 验证失败时自动导航到输入页面· 内置消息包支持，方便进行国际化本文假定读者熟悉页面流及JSP。本文将介绍创建表单bean和验证页面的基本步骤。如果发生验证错误用户将会得到通知，从而可以修正它们；动作方法被调用时可以认为数据是正确的。 Request生命周期及验证 表单验证针对的是已提交表单bean中的内容。通过JSP页面的 标签的动作属性，该bean被间接选中；表单bean与指定动作相关联。表单bean继承自com.bea.wlw.netui.pageflow.FormData。为了验证表单bean，开发人员需要重载validate() 方法并提供验证逻辑。图1演示了request的生命周期以及验证是如何发生的。当Strut的控制器接收到请求时，它将请求传递给页面流RequestProcessor。请求处理器的processPopulate 方法首先构造一个新的表单bean，其中含有来自请求的所有数据条目。此步骤将会创建FormData。然后请求处理器检查是否为动作激活了表单验证。如果验证被激活，将会针对该表单bean调用validate()方法。如果出现验证错误，控制权将交给一个输入页面，同时转交的还有用户输入的数据以及错误信息。如果没有发现错误，控制权将被传递给目标动作从而继续处理请求。图1中的蓝色方框代表页面流代码，黑色方框代表用户代码。 图1——请求验证生命周期通过简单的五个步骤就可以在页面流中进行验证。下面详细解释每个步骤。步骤1——验证方法验证用户输入的第一个步骤是在表单bean上创建validate()方法。该方法将会检查表单bean的属性，察看有没有用户输入错误。下面这个非常简单的表单bean定义了两个属性：name 和type。validate() 方法提供了对这些属性的验证。
public static class NameBean extends FormData
public void setType(String type)
this.type =
public String getType()
return this.
public void setName(String name)
this.name =
public String getName()
return this.
public ActionErrors validate(ActionMapping mapping,
HttpServletRequest request)
ActionErrorserrors = new ActionErrors();
if (name == null || name.equals("")) {
errors.add("nameError",
new ActionError("NullNameError"));
if (!Character.isUpperCase(name.charAt(0))) {
errors.add("nameError",
new ActionError("UpperCaseNameError",name));
if (type == null || (!type.equals("bar") &&
!type.equals("foo"))) {
errors.add("typeError",
new ActionError("TypeError",type));
if (!errors.empty()) {
request.setAttribute("errorNotSet",new Boolean(false));
}validate() 方法返回Struts的ActionErrors 对象，其中包含任何可能发生的错误信息。当该方法被调用时，它接收Struts ActionMapping 结构和HttpServletRequest。如果方法内部发生错误，Struts ActionError 类将会捕获错误信息。validate() 方法所做的第一件事就是创建用来返回验证错误的ActionErrors 对象。
ActionErrors errors = new ActionErrors();如果返回一个非空ActionErrors 对象，该方法会将错误通知给请求处理器。如果没有ActionError添加进来，ActionErrors将是空的。该方法可能返回空ActionErrors ，也可能返回null来表示没有错误发生。在本例中，如果发生错误将会创建一个新的ActionError 对象并将其添加到ActionErrors 中：
errors.add("typeError", new ActionError("TypeError",type));我们将在例子中创建一个含有名为"typeError"的属性的新错误。 标签使用名称来判断应该报告哪个错误。新创建的ActionError 含有一个主键 "TypeError"。主键是在消息包中查找错误显示信息要用到的ID。除此之外，我们还会传递变量type以便在信息创建时进行文本替换。步骤2——在动作中打开验证 只有为动作开启了验证功能，validate() 方法才能被调用。通过添加一个validation-error-page 属性到@jfp:action 注解即可开启验证功能:
* @jpf:action validation-error-page="index.jsp"
* @jpf:forward name="success" path="results.jsp"
protected Forward processNameBean(NameBean form)
HttpServletRequest req = getRequest();
req.setAttribute("Form",form);
return new Forward("success");
}既可以手工也可以通过动作源码视图的属性编辑窗口来定义注解。图2——动作源代码视图属性编辑窗口上面，我们把validation-error-page 设置成index.jsp。这将开启该动作的验证功能。如果发生验证错误，将会显示index.jsp。步骤3——创建错误消息文本错误消息文本是从消息包中查找出来的。消息包被放置在WEB-INF/classes子目录下。在本例中，我们创建Validation.properties 文件并将其放在 WEB-INF/classes/message 目录，请参见图3。图3——Validation.propertiesValidation.properties 中包含那些将会显示在 或
标签中的文本。该属性文件包含以下条目：
errors.header=
errors.footer=
errors.prefix=
errors.suffix
NullNameError=The name field must not be null.
UpperCaseNameError=The name '{0}' must begin
with an upper case letter.
TypeError=The type '{0}' must be the value 'foo' or 'bar'在例子中，我们通过以下语句创建一个 ActionError ：
ActionError("TypeError",type));字符串“TypeError”用于消息的查找：
TypeError=The type '{0}' must be the value 'foo' or 'bar'在运行时刻，变量type 替换'{0}'处从而生成报告给用户的完整文本。步骤4—— 将消息文件绑定到页面流消息文件Validation.properties 需要绑定到页面流，这样才能在报告消息给用户之前进行消息的查找。可以通过页面流的一个注解来进行绑定。
* @jpf:controller
* @jpf:message-resources resources="messages.Validation"
public class Controller extends PageFlowController
{ @jpf:message-resources注解声明页面流使用messages.Validation 属性文件。既可以在源代码中直接设置该注解，也可以在源码视图页面流属性编辑窗口下面的消息资源列表区域中设置。 图4——源代码视图页面流属性编辑窗口消息资源名称是查找消息包需要用到的classpath条目。本例中，因为WEB-INF/classes 在classpath中，所以messages.Validation能够被找到。它的实际文件名是WEB-INF/classes/message/Validation.properties。 注意：Java将会缓存那些访问过的消息包。如果在开发过程中修改了.properties 文件，可以通过修改页面流文件并重启测试浏览器、或停止并重启服务来清空缓存。步骤5——在JSP页面中报告错误有两个页面流标签用于报告验证过程中发生的错误。 标签根据value 属性进行错误报告。它通常被用在输入字段后面直接报告该字段的错误。 标签将会报告页面中的所有错误。下面的JSP代码片断演示了一个例子，它负责提交NameBean表单bean。它使用 标签在用户输入字段之后报告错误。除此之外，通过 标签，其它错误被报告在文档的底部。Name Input Form
<netui:textbox
dataSource="{actionForm.name}">
<netui-template:visible visibility="{request.errorNotSet}"
negate="true" >
标签有四个可以定义在消息包中的特殊属性：errors.header, errors.footer, errors.prefix, errors.suffi，利用这些属性可以在显示的消息周围进行格式设定。在本例中，错误被显示在一个未排序的列表中。而且， 标签允许error.prefix 和error.suffix 定义标记性的标签。本例中没有演示这一功能。 结果 图5是validate()方法生成一堆验证错误之后向用户显示的页面。用户在表单中输入非法数据后验证错误被返回，然后请求处理器定向到index.jsp页面，错误信息被显示在字段之后以及表单下面。错误表单的内容全部被返回，这样用户可以只修改那些出错的字段。 图5——带有验证错误的HTML页结论服务端的用户输入验证需要经历五个步骤。首先在表单bean中创建一个validate() 方法，该方法将会验证用户输入并报告错误。第二步，必须在接收表单的动作上设置validation-error-page 符号才能激活表单验证。第三步，添加错误文本到消息包中。第四步，借助消息资源注解，消息包被绑定到页面流上。最后，在JSP中添加 或
标签，它们将会显示错误文本。页面流框架会管理所有的验证调用，并在错误发生后将控制权路由到输入页面，否则路由到目标动作。
阅读(3057) | 评论(0) | 转发(0) |
相关热门文章
给主人留下些什么吧！~~
请登录后评论。Flowtime.js
What is it?
Flowtime.js is a framework for easily building HTML presentations or websites.
It’s built with web standards in mind and on top of a solid full page grid layout.
The animations are managed with native and accelerated CSS3 transitions.
Javascript takes care of the navigation behaviour and adds advanced functionalities and configuration options.
Press Down Key or Swipe Up to continue.
Compatibility and Support
Flowtime.js is fully compatible with real moderns browsers:
Internet Explorer 10
Internet Explorer 9 and some old versions of other browsers lack the transitions and some modern Javascript features but the main navigation and functionalities will work.
In older browsers degrades to a bi-directional scrolling navigation with anchor links.
Touch Devices Support
On touch devices you can navigate through slides swiping in all directions.
By now Flowtime.js was tested and works on Safari Mobile and Chrome Mobile on iOS devices but the support will be wider in the near future.
Mastering the Navigation
You can navigate in many ways. The most common way is using the keyboard.
Navigation Keys and default behaviours:
Down Key goes to the next page or shows up the next fragment (we’ll see this later).
Up Key goes to the previous page or hides the fragment.
Right Key goes to the adjacent page in the next section (if available, it’s like a grid, otherwise it goes to the last page in the next section).
Left Key goes to the adjacent page in the previous section.
Alternate Navigation Control
Pressing the Shift Key you can alternate the the default navig let’s see how:
Down Key goes to the next page skipping all the fragments.
Up Key goes to the previous page skipping all the fragments.
Right Key goes to the first page in the next section.
Left Key goes to the first page in the previous section.
Some Other Keys
Because: the more, the better.
Page Up Key goes to the first page of the current section.
Page Down Key goes to the last page of the current section.
Home Key goes to the first page of the first section.
End Key goes to the last page of the last section.
Overview Mode.
You can look at the entire presentation by pressing ESC Key.
When in Overview Mode you can go back to the Page Mode by pressing again the ESC Key.
Try it out!
WARNING! Experimental Feature. If you experience problems in webkit browser you can use the alternate Overview M see the
for more info.
Navigating the Overview
In Overview Mode the arrow keys works in the same way as in Page Mode, highlighting the future destination. To navigate to the highlighted page just press Return or Enter Key or click on the desired page.
Navigate via Links or Javascript API
You can links every page by simply building the href value using this schema:
&a href="#/[section data-id attribute]/[page data-id attribute]"&
Where data-id attribute is an optional attribute you can add to every section or page.
I.e.: if you want to go to back to the first page
(press backspace to come back to this page).
You can also trigger every navigation behaviour using the Flowtime.js Javascript API.Take a look at the
if you want to learn more.
Navigate With History
Flowtime.js offers a full support for the HTML5 History API where available or gracefully degrades on the hashchange event.
This means that you can navigate using the browser’s back and forward buttons and deeplink a page for sharing purposes.
Progress Indicator
You can enable a default progress indicator useful not only to know what’s the current page you are looking, but also as a navigation tool.
Look at the bottom right corner and you can see a miniature of the presentation structure.
Clicking on a page thumb will navigate to that page.
Fragments Support
The built in fragments navigation allows to advance step by step inside a page.
Press down to try.
You can discover single elements or even a single part of an element, one at a time.
Fragments navigation is deeply customizable with some configuration options
You can learn how in the .
Fragments Unleashed
Fragments can be more than just delayed piece of page.
Thanks to some special classes you can add a couple of useful custom behaviours.
The .step fragment will
The .shy fragment will com
You can use this two special fragment types to easily create special effects.
This is a .shy example!
And this is a .step one!
Default HTML Structures
Flowtime.js comes with a default theme that styles the most common HTML structures, like:
1st Level Heading
2nd Level Heading
3rd Level Heading
4th, 5th and 6th Level Heading
Unordered Lists
Another item.
Just another item.
Ok, we get it!
Ordered Lists
Definition Lists
a single unit of everything.
the only even prime number.
without the “h” is a plant.
“Quattro” in italian.
Quotes and Citations
My favourite quotation: The bad craftsman blames his tools.
Sotto un cespo di rose scarlatte dai al rospo the caldo col latte.
Sotto un cespo di rose paonazze tocca al rospo lavare le tazze.
on HTML5 Doctor.
Theme and Styling
If you don’t like the default theme or you want to build your own (or both things),
or if you want to build a website on top of Flowtime.js,
you can write your own theme and replace the default one.
Theme and core css are in separate files so you can’t break the layout (unless you override some classes).
Fluid Layout
Everything can be fluid, just use em, rem and % units if you want to make an element resizable.
Image Management
Images are fluid like all the other content.
You can insert images in the flow or stack images ones on top the others with a minimal markup overhead to create some fancy fragments tricks.
Go to the next pages to see fluid images in action and how stacked images can be managed, both in the flow or centered in the slide.
Look at the source code to learn how to write the markup.
Stacked Images
Centered Stacked Images
About the Centered Stack
You can center anything, not only images!
Just like this content.Useful for splash pages and titles.
And you are not limited to stacks, you can center what you want.
Native Parallax Support
By popular demand Flowtime.js includes native parallax support*.
Simply add a parallax class to anything you want to have parallax enabled and configure the amount of distance for all elements or for a single element using data-parallax attribute.
For a for more info read the .
* By the way: I’ but ehi… this is the "web 3.0".
The Invaders from Audiogalaxy
This Page Is Just for Testing the Parallax
In the previous page, from left to right:
King Mix’s most trusted servant. After a diploma in the music conservatory in the…
son of the noble dynasty of the Mix of Censor, he soon shows his…
the most feared space intruder on Mixer. He flunked the musical exam…
More info about this villains on .
Code Snippets Highlight
Code highlight is a courtesy of .Because I really didn’t want to re-invent the wheel.You can use what you want, it’s not a dependency (but it’s very smart and cool).
function saySomethingSmart()
alert("The bad craftsman blames his tools!");
.is-not-water {
display: inline-
&h1&The Bad Craftsman Blames His Tools!&/h1&
Events and Custom Implementations
When navigated to a page Flowtime.js fires a custom flowtimenavigation event full of useful properties to customize or build your components or behaviours.
to learn more about this event and its properties.
Some Examples
You can take a look at some examples to explore some of the possibilities that Flowtime.js offers to customize your experience.
Continues …
More Examples
If you need a specific example or if you have a question about a feature feel free to ask or .
Use It! It’s Free
This project is open source, feel free to contribute to the development on .
Feedbacks, suggestions and bug reports are welcomes.
Use it as you wish and build great things.And when you’ll have done let me know the URL, I will appreciate it.
Designed and coded by Marco Lago
Interaction/Experience/Game/Designer/Developer
You can find me on Twitter as
If you like this work spread the word,)About liuyanghejerry
江南大学大学生。网页编程爱好者，C++爱好者。}