使用Validator做SpringMVC的驗證框架
章節列表
上一章只為大家介紹了Validator的後端驗證功能,接下來就為大家介紹一下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
從上面可以看得到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="註冊"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>
如果網站設計是統一風格的,上面的是可以重用的。
Validator的前端驗證功的介紹能到此結束,下一章我為大家介紹Validator自定義驗證元件的方法