使用Validator做SpringMVC的驗證框架 - Validator前端驗證

DevEFX發表於2016-06-03
SpringMVC框架前端

章節列表

  1. 第一章：使用Validator做SpringMVC的驗證框架 - 配置SpringMVC環境
  2. 第二章：使用Validator做SpringMVC的驗證框架 - 使用Validator
  3. 第三章：使用Validator做SpringMVC的驗證框架 - Validator前端驗證
  4. 第四章：使用Validator做SpringMVC的驗證框架 - 自定義驗證元件

上一章只為大家介紹了Validator的後端驗證功能，接下來就為大家介紹一下Validator前端功能，你會發現他的巧妙之處。

Validator框架原始碼地址：https://github.com/devefx/validator

1 - 配置前端驗證配置

首先我們新建一個“com.devefx.website.validator.config”包，並編寫Config.java，並實現“com.devefx.validation.web.config.ValidatorConfig”介面

Config.java

package com.devefx.website.validator.config;

import com.devefx.validation.web.config.Modules;
import com.devefx.validation.web.config.Routes;
import com.devefx.validation.web.config.ValidatorConfig;
import com.devefx.website.validator.RegisterValidator;

public class Config implements ValidatorConfig {

    public void configModules(Modules modules) {
        // 這裡可以新增自定義驗證元件

    }

    public void configRoute(Routes routes) {
        // 這裡配置驗證器的訪問路線

        // 設定基準路徑
        routes.setBasePath("/validator");

        // 註冊驗證器
        routes.add("/registerValidator.js", RegisterValidator.class);

    }

}

上面這段配置就是告訴 Validator框架根據 RegisterValidator.class 生成一個對應JavaScript指令碼，他的相對訪問路徑是：/validator/registerValidator.js

接下來配置一下web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0"
         xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
         http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
  <!-- 配置SpringMVC DispatcherServlet -->
  <servlet>
    <servlet-name>dispatcher</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:spring-*.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>dispatcher</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

  <!-- 配置Validator前端驗證功能 -->
  <servlet>
    <servlet-name>validator</servlet-name>
    <servlet-class>com.devefx.validation.web.ValidatorServlet</servlet-class>
    <!-- validator核心js訪問路徑 -->
    <init-param>
      <param-name>url</param-name>
      <param-value>/validator/validator.js</param-value>
    </init-param>
    <!-- 告訴Validator配置類 -->
    <init-param>
      <param-name>configClass</param-name>
      <param-value>com.devefx.website.validator.config.Config</param-value>
    </init-param>
  </servlet>
  <servlet-mapping>
    <servlet-name>validator</servlet-name>
    <url-pattern>/validator/*</url-pattern>
  </servlet-mapping>
</web-app>

好了，現在萬事俱備。我們開啟瀏覽器訪問一下validator核心js和我們在Config.java中註冊的RegisterValidator.class

http://localhost/validator/validator.js

這裡寫圖片描述

http://localhost/validator/registerValidator.js

這裡寫圖片描述

從上面可以看得到Validator框架已經自動幫我們生成了JavaScript的驗證程式碼，是不是很簡單。趕緊在我們的頁面中使用起來吧。

2 - 準備工作

首先我們需要設計一下提示錯誤的樣式，比如像下面這樣，在文字框右側顯示紅色的錯誤提醒

這裡寫圖片描述

程式碼大概是這樣的

register.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
    <head>
        <title>註冊</title>
        <style type="text/css">
            .error { color: red; padding-left: 5px }
        </style>
    </head>
    <body>
    <form id="registerForm" action="/do/register" method="post">
            <table>
                <tr>
                    <td>使用者名稱：</td>
                    <td><input name="username"/><span class="error">使用者名稱不能為空</span></td>
                </tr>
                <!-- 下面的就省略了 -->
            </table>
        </form>
    </body>
</html>

接下來就要開始使用Validator實現前端驗證的功能了，準備工作

register.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
    <head>
        <title>註冊</title>
        <!-- Validator前端驗證功能依賴jQuery庫 -->
        <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
        <!-- Validator前端驗證功能的核心js -->
        <script src="/validator/validator.js"></script>
        <!-- 使用者配置的驗證器 -->
        <script src="/validator/registerValidator.js"></script>
        <style type="text/css">
            .error { color: red; padding-left: 5px }
        </style>
    </head>
    <!-- 此處省略 -->
</html>

3 - 認識Validator前端驗證方法

我給大家介紹一下Validator前端驗證器提供給使用者的幾個方法

jQuery擴充套件 - validator() 方法

  驗證表單核心方法

語法

$(selector).validator(params)

引數 描述
params 必填。用於配置 validator 驗證的鍵值對集合

引數

name
  型別：String
  告訴validator使用哪個驗證器進行驗證。
  （當頁面只要一個驗證器的時候可以省略）

success
  型別：Function
  驗證通過後的回撥函式

error
  型別：Function
  驗證失敗後的回撥函式
  有兩個引數：錯誤資訊、驗證的欄位
  注意：當“驗證欄位”引數為空的時候表示全部驗證，否則表示只驗證了此欄位

例項

$(selector).validator({
  name: “ValidatorName”,
  success: function() {
    // js驗證通過
  },
  error: function(error, field) {
    // js驗證失敗
  }
});

jQuery擴充套件 - commit() 方法

  用來提交表單資料

語法

$(selector).commit(callback)

引數 描述
callback 必填。提交成功後的回撥函式。

引數

callback
  型別：Function
  引數：由伺服器返回，並處理成JSON資料；描述狀態的字串。
  注意：這其實是一個非同步ajax請求

例項

$(selector).commit(function(result) {
  // 伺服器響應
});

jQuery擴充套件 - findInputByName() 方法

  根據Input控制元件名稱來查詢Input控制元件

語法

$(selector).findInputByName(name)

引數 描述
name 必填。要查詢的input控制元件名稱。

例項

$(selector).findInputByName(“username”);

4 - 正式使用Validator前端驗證器

前面我們認識了Validator提供的函式，下面我們就要用這些函式為我們實現驗證功能

register.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
    <head>
        <title>註冊</title>
        <!-- Validator前端驗證功能依賴jQuery庫 -->
        <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
        <!-- Validator前端驗證功能的核心js -->
        <script src="/validator/validator.js"></script>
        <!-- 使用者配置的驗證器 -->
        <script src="/validator/registerValidator.js"></script>
        <style type="text/css">
            .error { color: red; padding-left: 5px }
        </style>
        <script type="text/javascript">
            $(function () {
                var selector = $("#registerForm");
                selector.validator({
                    success: function () {
                        // 刪除頁面全部的錯誤提示
                        $("#registerForm .error").remove();
                        // 錯誤處理方法
                        var errorMethod = this.error;
                        // 提交表單到後臺
                        selector.commit(function (result) {
                            // 判斷後臺是否驗證通過
                            if (result.success) {
                                alert("提交成功！");
                            } else if (result.data) {
                                // 重新處理錯誤
                                errorMethod(result.data, null);
                            }
                        });
                    },
                    error: function (error, field) {
                        // 處理submit動作的錯誤
                        if (field == null) {
                            // 刪除頁面全部的錯誤提示
                            $("#registerForm .error").remove();
                            // 根據錯誤資訊，重新顯示錯誤資訊
                            for (var code in error) {
                                selector.findInputByName(code).after('<span class="error">' + error[code] + '</span>');
                            }
                            return;
                        }
                        // 處理field驗證的錯誤
                        // 根據field刪除相關錯誤提示
                        selector.findInputByName(field).next().remove();
                        // 如果field驗證失敗
                        if (error != null) {
                            // 在頁面顯示field的錯誤資訊
                            selector.findInputByName(error.code).after('<span class="error">' + error.message + '</span>');
                        }
                    }
                });
            });
        </script>
    </head>
    <body>
        <form id="registerForm" action="/do/register" method="post">
            <table>
                <tr>
                    <td>使用者名稱：</td>
                    <td><input name="username"/></td>
                </tr>
                <!--  -->
                <tr>
                    <td>密碼：</td>
                    <td><input name="password" type="password"/></td>
                </tr>
                <tr>
                    <td>確認密碼：</td>
                    <td><input name="password_safe" type="password"/></td>
                </tr>
                <tr>
                    <td>手機號：</td>
                    <td><input name="phoneno"/></td>
                </tr>
                <tr>
                    <td>郵箱：</td>
                    <td><input name="email"/></td>
                </tr>
                <tr>
                    <td>出身日期：</td>
                    <td><input name="birthday" type="date"/></td>
                </tr>
                <tr>
                    <td>個人主頁：</td>
                    <td><input name="homepage"></td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <input type="submit" value="註冊"/>&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="reset" value="重置"/>
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

如果網站設計是統一風格的，上面的是可以重用的。

Validator的前端驗證功的介紹能到此結束，下一章我為大家介紹Validator自定義驗證元件的方法

相關文章