JSR 303 Bean验证+ JavaScript客户端验证

随着 Web 应用程序变得越来越复杂，并涉及到大量的表单数据提交，保证数据有效性和正确性变得越来越重要。为了帮助开发人员提高表单数据验证的效率，Java 企业版（Java EE）中引入了 JSR 303 规范，定义了一套基于注解的 Bean 验证框架。

JSR 303 Bean验证

JSR 303 规范定义了一套基于注解的 Bean 验证框架，可以方便地对 JavaBean 对象进行数据验证。使用 JSR 303 Bean 验证，我们可以通过编写简单的注解来指定验证规则，并且可以很容易地将这些规则应用于我们的 JavaBean 对象。以下是一个简单的示例：

------ ----- ---- -

    ---------------- - ----------
    ------- ------ ---------

    --------- - -- --- - --- ------- - -------- ----- - ----- ----
    ------- ------ ---------

    -- ------- --- -------
-

在上面的示例中，我们使用了 @NotNull 和 @Size 注解来指定字段的验证规则。@NotNull 表示该字段不能为空，@Size 表示该字段的长度必须在指定范围内。使用 JSR 303 Bean 验证时，只需要在我们的 Controller 中调用 javax.validation.Validator 的 validate() 方法，即可对 JavaBean 对象进行验证：

-----------
------ ----- -------------- -

    ----------
    ------- --------- ----------

    -------------------------
    ------ ------ --------------- ---- ----- ------------- ------- -
        -- -------------------- -
            -- ------
        -
        -- ------
        ------ ------------------
    -

-

在上面的示例中，我们使用了 @Valid 注解来指示 Spring MVC 框架对 User 对象进行验证。如果验证失败，Spring MVC 框架会将错误信息存储到 BindingResult 中，我们可以通过该对象获取错误信息并进行处理。

JavaScript客户端验证

虽然 JSR 303 Bean 验证很方便，但用户体验不佳。因为当用户输入不合法的数据时，只有在提交表单后才能看到错误提示，这样会降低用户的使用体验。为了提高用户体验，我们可以使用 JavaScript 客户端验证，在用户输入数据时就及时地对数据进行验证和提示。

以下是一个简单的 JavaScript 客户端验证示例：

----- ------------- ------------------ --------------
    -----
        ------ ---------------------------
        ------ ----------- --------------- ------------- --
        ----- --------------------------
    ------
    -----
        ------ --------------------------
        ------ --------------- --------------- ------------- --
        ----- --------------------------
    ------
    ------- -------------------------
-------
--------
    --- ---- - ------------------------------------
    --- ------------- - ------------------------------------
    --- ------------- - ------------------------------------
    --- ------------- - -----------------------------------------
    --- ------------- - -----------------------------------------

    ------------------------------- --------------- -
        -- --------------------- -
            -----------------------
        -
        -- --------------------- -
            -----------------------
        -
    ---

    -------- ------------------ -
        --- ----- - ---------------------------
        -- ------ --- --- -
            ------------------------- - ----------
            ------ ------
        - ---- -
            ------------------------- - ---
            ------ -----
        -
    -

    -------- ------------------ -
        --- ----- - ---------------------------
        -- ------------- - - -- ------------ - --- -
            ------------------------- - -------- - - -- ----

----------------------------------------------------------- ----------
---------------------------------------------------------------------------------------
阅读全文

猜你喜欢

  • 数据可视化学习d3.js

    数据可视化是现代Web应用程序中关键的一环，它可以让复杂的数据集更加直观、易于理解和使用。D3.js（Data-Driven Documents）是一个基于JavaScript的数据可视化库，已经成为...

    7 年前
  • 主干航线没有哈希？

    在前端开发中，我们通常会使用哈希（hash）来实现单页面应用程序（SPA）。但是，在某些情况下，使用主干航线（history）代替哈希可能更加优雅和可靠。本文将介绍主干航线的优点、缺点以及如何使用它来...

    7 年前
  • 启用跨域 Ajax 请求的 Firefox 设置

    在前端开发中，经常需要使用 Ajax 发送跨域请求。然而，在某些情况下，Firefox 默认会禁用跨域 Ajax 请求，这给我们的开发带来了不便。本文将介绍如何在 Firefox 中启用跨域 Ajax...

    7 年前
  • 使用 JavaScript 将图片添加到 HTML 中

    在前端开发中，我们经常需要在网页中显示图像。通过使用 img 元素，我们可以轻松地将图片添加到 HTML 中。但是，在某些情况下，我们可能需要以编程方式向页面添加图像，例如在用户上传新图片后动态更新页...

    7 年前
  • 如何在 jqGrid 中显示所有行？

    jqGrid 是一款流行的 jQuery 插件，用于创建灵活、可定制和易于使用的网格视图。在使用 jqGrid 时，经常需要显示大量的数据，而默认情况下 jqGrid 只会显示一页的数据。

    7 年前
  • 函数调用函数

    在前端开发中，函数是非常重要的工具。它们可以让我们将代码模块化、重复利用代码，并且使代码更加易于维护和理解。而函数调用函数则是利用函数的嵌套特性，将多个功能组合起来，实现更加复杂的操作。

    7 年前
  • 如何在jQuery成功回调函数中传递上下文

    对于前端开发人员而言，使用 jQuery 库进行异步请求是一种常见的做法。通常情况下，我们会在成功回调函数中处理返回的数据。然而，在某些情况下，我们需要将外部上下文中的数据传递给回调函数使用。

    7 年前
  • setInterval 是 CPU 密集型吗？

    setInterval 是 JavaScript 中常用的一个定时器函数，可以周期性地执行某些代码。然而，当频繁使用 setInterval 时，会引发一个问题：它是否是 CPU 密集型的操作？ 什么...

    7 年前
  • 胡子模板能做模板扩展吗？

    胡子模板是一种流行的 JavaScript 模板引擎，它允许您将数据和 HTML 结构组合在一起。但是，在开发复杂的应用程序时，通常需要更高级的功能来处理逻辑、循环和条件语句。

    7 年前
  • 我为什么要使用 ES6？

    在前端开发中，ES6 (ECMAScript 2015) 已经成为了一种标准。ES6 带来了很多新的特性，这些特性可以帮助我们编写更简洁、高效和可维护的代码。本文将介绍 ES6 的几个主要特性，并说明...

    7 年前
  • 将Int转换为浮点数

    在前端开发中，我们可能会需要将整数转换为浮点数。这个过程看起来很简单，但是有几个细节需要注意。在本文中，我们将讨论如何将整数转换为浮点数，并解释为什么要注意一些细节。

    7 年前
  • 如何使div始终浮在屏幕上的右上角？

    在前端开发中，经常需要将某些元素固定在页面的某个位置，而实现这一点最常见的方法是使用CSS的position属性。本文将介绍如何使用CSS实现一个div始终浮在屏幕上的右上角。

    7 年前
  • 如何按属性名称排序Javascript对象

    Javascript 对象是一种非常灵活的数据结构，可以用来表示各种类型的数据。然而，在某些情况下，我们可能需要对它们进行排序。本文将介绍如何按照属性名称对Javascript对象进行排序。

    7 年前
  • 如何设置 jQuery select2 选择值？

    jQuery select2 是一个高度可定制且易于使用的下拉选择框插件。在前端开发中，它经常用于实现可搜索和多选的下拉列表等组件。本文将介绍如何设置 jQuery select2 的选择值。

    7 年前
  • 退货和退款一样吗？

    在电商购物中，如果用户不满意或者商品有质量问题，就需要退货或退款。但是，很多人对于退货和退款的概念并不清楚，甚至认为退货和退款是同一个概念。本文将详细介绍退货和退款的区别及其实现方式，以及如何在前端实...

    7 年前
  • Ajax中的HTTP头请求

    在Web开发中，Ajax是一种常见的技术，它可以实现异步数据交互，不需要刷新整个页面。而HTTP头请求则是Ajax中一个重要的概念，本文将介绍HTTP头请求的相关知识和使用方法。

    7 年前
  • 捕获表单以JavaScript提交

    在前端开发中，表单是非常常见的元素。而对于需要动态修改表单提交内容的场景，我们可以通过 JavaScript 来捕获表单并进行提交。本文将介绍如何使用 JavaScript 捕获表单并提交表单数据。

    7 年前
  • Backbone.js: 构建Web前端应用程序的基础框架

    Backbone.js是一个轻量级的JavaScript框架，它提供了一组工具，帮助开发者构建Web前端应用程序。与其他JavaScript框架相比，Backbone.js的优点在于其简洁且易于理解的...

    7 年前
  • 使用jQuery构建带有参数的URL

    在前端开发中，我们通常需要将一些参数传递到后端API中。为了方便地构建带有参数的URL，jQuery提供了一个方便的方法，使得我们可以轻松地构建出符合要求的URL。

    7 年前
  • 使用新的脸谱网 JavaScript SDK 检查扩展权限

    脸谱网的 JavaScript SDK 是一个很有用的工具，它可以让开发者轻松地在网站中集成脸谱网的功能。其中包括登录、分享、发布等功能。但是，在使用这些功能之前，我们需要获取用户授权。

    7 年前

相关推荐

    暂无文章