文档章节

简单方便的表单验证

哈库纳
 哈库纳
发布于 2016/10/01 17:08
字数 1270
阅读 426
收藏 20
点赞 1
评论 0

    本节将会介绍如何使用 Hasor 强大的表单验证功能。在开始正文之前先墨迹两句为什么要使用表单验证功能。

    通常一个表单在递交到后台之后我们在处理表单内容之前会做一些参数合法性校验。比如:年龄大于1,性别必须是:男或女,帐号密码输入不能为空。最后还要把验证的信息反馈到页面上。

    Hasor 在设计表单验证功能时候参考了大量具有类似功能的框架,也做了大量 API 上面的设计优化。相信会给您一个非常清爽欢快的体验。好了废话不多说,进入正题。

表单验证

    在 Hasor 中使用表单验证必须要通过 Controller,我们以登录场景为例进行说明。首先把各种登录请求参数传递进来(关于传参可以阅读:https://my.oschina.net/u/1166271/blog/753718)

public class LoginForm {
    @ReqParam("account")
    private String account;
    @ReqParam("password")
    private String password;
    ...
}

@MappingTo("/login.htm")
public class Longin {
    public void execute(@Params LoginForm loginForm, RenderData data) {
        ...
    }
}

    第一步:编写表单验证器。

public class LoginFormValidation implements Validation<LoginForm> {
    @Override
    public void doValidation(String validType, LoginForm dataForm, ValidErrors errors) {
        if (StringUtils.isBlank(dataForm.getAccount())) {
            errors.addError("account", "帐号为空。");
        }
        if (StringUtils.isBlank(dataForm.getPassword())) {
            errors.addError("password", "密码为空。");
        }
    }
}

    第二步:建立表单对象 LoginForm 和验证器 LoginFormValidation 之间的关系

@ValidBy(LoginFormValidation.class)
public class LoginForm {
    ...
}

    第三步:通过 @Valid 注解告诉 Controller 这个参数需要进行表单验证。

@MappingTo("/login.do")
public class Longin {
    public void execute(@Valid() @Params LoginForm loginForm) {
        System.out.println("login data is " + JSON.toString(loginForm));
    }
}

    接下来我们接着改造 Login,让它实现如果表单验证成功我们就跳转到用户详情页。如果验证失败就回到登陆页并提示错误。

@MappingTo("/login.htm")
public class Longin {
    public void execute(@Valid() @Params LoginForm loginForm, RenderData data) {
        if (data.isValid()) {
            data.renderTo("/userInfo.htm");
        } else {
            data.put("loginForm", loginForm);
            data.renderTo("/login.htm");//使用 htm 引擎渲染页面。
        }
    }
}

    剩下的就是login页面处理验证信息回显,这次我们使用 freemarker 作为模版渲染引擎

<form action="/login.do" method="post">
    <!-- 帐号的验证结果 -->
    帐号:<input name="account" type="text" value="${loginForm.account}">
    <#if validData["account"]?? >
        ${validData["account"]?join(",")}
    </#if>
    
    <!-- 密码的验证结果 -->
    密码:<input name="password" type="password" value="${loginForm.password}">
    <#if validData["password"]?? >
        ${validData["password"]?join(",")}
    </#if>
    <input type="submit" value="递交"/>
</form>

    在上面这个例子中,我们还顺便实现了表单内容如果验证失败时在跳转回 login 页面时,自动把上一个login 的页面参数回显到新的 login 页面里。   

    什么都不填执行递交会看到如下页面:

 

使用多个验证器

    下面在展示一个稍微酷炫一点的技能,使用多个表单验证器同时为同一个表单进行验证。

    编写新的表单验证器来查询数据以验证登录动作。在执行数据库验证之前,首先判断一下之前的表单验证是否已经通过。如果没有通过,那么就不执行数据库验证。如果验证通过了,就到数据库里查询一下数据。

public class DataBaseValidation implements Validation<LoginForm> {
    @Inject
    private UserDao userDao;
    @Override
    public void doValidation(String validType, LoginForm dataForm, ValidErrors errors) {
        if (!errors.isValid()) {
            return;//前面的验证没有通过
        }
        //
        String account = dataForm.getAccount();
        String password = dataForm.getPassword();
        UserInfo userInfo = userDao.queryUserInfoByAccount(account);
        if (userInfo == null) {
            errors.addError("login", "登陆失败,不存在的帐号。");
            return;
        }
        if (!StringUtils.equalsIgnoreCase(password, "pwd")) {
            errors.addError("login", "登陆失败,密码错误。");
            return;
        }
        //
    }
}

    为了快速说明表单验证的用法,我使用 UserDao 封装查询数据库操作,而查询数据库操作是一个假查询。查询只是会判断帐号字段是否为“zyc”如果不是zyc返回空,如果匹配成功返回一个新的对象。

public class UserDao {
    public UserInfo queryUserInfoByAccount(String account) {
        if (StringUtils.equalsIgnoreCase(account, "zyc")) {
            return new UserInfo();
        }
        return null;
    }
}

     最后配置一下表单验证器。修改 FormBean 配置多个表单验证器,配置的验证器顺序就是表单验证执行的顺序。第一个验证器执行基本的数据验证,第二个验证器执行数据库验证。

@ValidBy({LoginFormValidation.class, DataBaseValidation.class})
public class LoginForm {
    ...
}

    最后在改造一下login 页面,把所有验证信息都输出到页面上。

<form action="/login.do" method="post">
    <!-- 帐号的验证结果 -->
    帐号:<input name="account" type="text" value="${loginForm.account}">
    <#if validData["account"]?? >
        ${validData["account"]?join(",")}
    </#if>
    <br/>

    <!-- 密码的验证结果 -->
    密码:<input name="password" type="password" value="${loginForm.password}">
    <#if validData["password"]?? >
        ${validData["password"]?join(",")}
    </#if>
    <br/>
    <!-- 登陆处理结果 -->
    <#if validData["login"]?? >
        ${validData["login"]?join(",")}<br/>
    </#if>

    <input type="submit" value="递交"/><br/>
</form>

    运行一下程序,访问登录页面执行登录。

    1. 如果什么都没有填写执行登录,我们可以看到提示,帐号为空,密码为空。

    2.如果帐号和密码都不为空,那么会执行第二个验证器。在第二个验证器中只有正确输入了

        帐号:“zyc”,密码“pwd”。才会登录成功,否则都会提示错误。下面让我们看看执行结果。

    3.随便输入帐号和密码。

    4.帐号输入“zyc”正确,密码随便输入。

    5.输入正确的帐号和密码,可以看到页面提示出“Hello You.”

© 著作权归作者所有

共有 人打赏支持
哈库纳

哈库纳

粉丝 956
博文 89
码字总数 149803
作品 4
杭州
后端工程师
jQuery validate插件初探

jQuery的validate插件,在jQuery验证时使用非常方便。 具体使用步骤: 1.引入文件 既然是jQuery插件,必须要有jQuery作为支持jquery-1.3.2.min.js 然后是验证的核心文件jquery.validate.js ...

桃子红了呐
2017/07/07
0
0
Javascript之return

做表单验证的时候,除了错误提示之外,还要做的一点就是避免表单提交。 如果避免表单提交呢? 有一个方法很简单,就是return 我们来看一下代码: $(".make_sure").click(function(){ 这是表单...

桃子红了呐
2017/06/25
0
0
20个jQuery插件,帮你打造完美网页表单

网页表单主要是用来从用户那里收集一些必要的信息,是网页设计中不可或缺的一环。一个设计良好的表单能更有效的获取用户信息,也会给用户带来更好地使用体 验。基于这一点,很多设计师开始使...

鉴客
2012/03/31
4.8K
13
jQuery之validate验证表单

访问jQuery validate官网下载最新插件 https://jqueryvalidation.org/ validate是用来验证表单的 以前我们都是用js手动验证 现在可以通过这个插件直接调用别人写好的方法 更加简单方便 vali...

codingcoge
05/19
0
0
表单提交时如何将错误信息传递到页面中,并且保存原来提交数据

曾经何时,你还有我或许都在困惑,如何方便的将验证不通过的表单信息再返回到前台页面,例如我注册一个账号,辛辛苦苦填写了N多项,一个格式验证没有通过,一切都需要充填,虽然Ajax可以解决...

深山猎人
2014/08/07
0
4
网站后端.Flask.实战-社交博客开发-注册用户?

添加用户注册表单 1.程序的导航页面要显示一个链接,把用户带到注册页面,让用户输入电子邮件地址,用户名,密码和确认密码 FlaskWeb/app/auth/forms.py 说明:Regexp确保用户名只能包含数字字母下...

满满李
2016/06/26
254
2
验证框架Validation的用法

Validation是最常用的javascript表单验证插件。Validation是历史最悠久的jquery插件之一,经过了全球范围内不同项目的验证,并得到了许多web开发者的好评。作为一个标准的验证方法库,valid...

银古
2013/08/09
0
0
简单易用的表单验证插件Validform - 一行代码搞定整站的表单验证!

官方网址:validform.rjboy.cn Validform:一行代码搞定整站的表单验证! 为什么能如此方便?插件的核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素,让验证代码在执行时只是...

haiercdboy
2012/03/22
0
0
细说 Angular 2+ 的表单(二):响应式表单

细说 Angular 2+ 的表单(一):模板驱动型表单 响应式表单 响应式表单乍一看还是很像模板驱动型表单的,但响应式表单需要引入一个不同的模块: 而不是 与模板驱动型表单的区别 接下来我们还...

接灰的电子产品
2017/06/13
0
0
表单验证插件--SkValidForm

SkValidForm jQuery验证插件(Jquery Validation Plugin) 这个jQuery插件使简单的客户端的表单验证方便,同时还提供大量的定制选项。如果你正在从头开始构建新的东西,也可以很好的选择,但...

skschool
2015/09/24
607
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

python以太坊类库web3.py概览

python通过web3.py库与以太坊交互共同入口是web3对象。web3对象提供API接口,python开发应用与以太坊进行交互如钱包创建、支付、转账等连接JSON-RPC服务器进行。 Providers提供者 Providers使...

智能合约
7分钟前
0
0
【Android学习笔记】设置App启动页

先将启动页放到项目资源中,图片一般是1080*1920的jpg。 新建一个activity,如图: 创建成功之后,打开刚刚创建的activity,来进行代码的编写: >>>阅读全文

全部原谅
8分钟前
0
0
什么是React-redux、为什么使用React-redux、怎么使用React-redux

1、什么是React-redux React-redux是用于连接React和Redux的 2、为什么使用React-redux 使用React-redux可以使redux部分代码更简洁更明了,比如组建中需要使用到的数据都在mapStateToProps方...

kimyeongnam
11分钟前
0
0
Spring核心——Stereotype组件与Bean扫描

在注解自动装载中介绍了通过注解(Annotation)自动向Bean中注入其他Bean的方法,本篇将介绍通过注解(Annotation)向容器添加Bean的方法。 Spring的核心容器提供了@Component和@Bean注解来标...

随风溜达的向日葵
11分钟前
0
0
利用世界杯,读懂 Python 装饰器

Python 装饰器是在面试过程高频被问到的问题,装饰器也是一个非常好用的特性, 熟练掌握装饰器会让你的编程思路更加宽广,程序也更加 pythonic。 今天就结合最近的世界杯带大家理解下装饰器。...

猫咪编程
14分钟前
0
0
flink fold example

flink fold例子 import org.apache.flink.api.common.functions.*;import org.apache.flink.streaming.api.datastream.DataStream;import org.apache.flink.streaming.api.environment.S......

coord
15分钟前
0
0
c++ qt 组播总结

每个人都有不同的认知规律和习惯, 有的人喜欢搞一套严密的大理论, 论述起来滔滔不绝, 不管自己懂不懂, 反正读者/听者是没搞懂。 有的人喜欢从实践出发, 没看到代码, 不运行一下, 不看...

backtrackx
20分钟前
0
0
Sublime text2安装json格式化插件SublimePrettyJson[Windows]

一、下载SublimePrettyJson插件包 https://github.com/dzhibas/SublimePrettyJson 二、将下载的文件解压放到在package目录下面 C:\Users\lucky\AppData\Roaming\Sublime Text 3\Packages 每个......

lazy~
20分钟前
0
0
安装vue-cli 报4058错误

1. 4058是网络代理错误。 安装淘宝源修改一下就可以了: npm --registry https://registry.npm.taobao.org info underscore 改为cnpm执行: cnpm install --global vue-cli 安装成功: 试试版...

MrBoyce
21分钟前
0
0
CPU飙升分析

1、top -----看具体的进程 2、top -H -p pid ------该进程的线程 3、printf 0x%x 15248 ------将线程改为16进制 4、jstack 进程...

北极之北
24分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部