簡單方便的表單驗證

    本節將會介紹如何使用 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.」