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

章节列表

第一章：使用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 - 准备工作

首先我们需要设计一下提示错误的样式，比如像下面这样，在文本框右侧显示红色的错误提醒

代码大概是这样的

<%@ 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实现前端验证的功能了，准备工作

<%@ 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提供的函数，下面我们就要用这些函数为我们实现验证功能

<%@ 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自定义验证组件的方法

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/devefx/article/details/51576672
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2019-08-27 11:34:08
阅读 ( 2240 )
分类：前端