您的位置：首页 > 编程语言 > Java开发

使用Validator做SpringMVC的验证框架 - Validator前端验证

2016-06-03 09:58 274 查看

章节列表

第一章：使用Validator做SpringMVC的验证框架 - 配置SpringMVC环境

第二章：使用Validator做SpringMVC的验证框架 - 使用Validator

第三章：使用Validator做SpringMVC的验证框架 - Validator前端验证

第四章：使用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="注册"/>    
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>


如果网站设计是统一风格的，上面的是可以重用的。

Validator的前端验证功的介绍能到此结束，下一章我为大家介绍Validator自定义验证组件的方法
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航