npm 包 bootstrap-validator-commonjs 使用教程

简介

bootstrap-validator-commonjs 是一个基于 Bootstrap 样式的表单验证插件，支持 CommonJS 和 AMD 模块化规范。本文将重点介绍 npm 包 bootstrap-validator-commonjs 的使用教程。

安装

使用 npm 安装 bootstrap-validator-commonjs：

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

引入

引入 bootstrap-validator-commonjs：

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

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

使用

在表单上加上 validator 属性即可使用 bootstrap-validator-commonjs，如下所示：

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

自定义错误提示

bootstrap-validator-commonjs 提供了一些默认的错误提示信息，如果需要自定义错误提示信息，可以通过 data-* 属性来指定，如下所示：

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

示例

下面是一个完整的例子：

HTML：

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

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

效果：

总结

本文介绍了 npm 包 bootstrap-validator-commonjs 的安装、引入、使用和自定义错误提示，希望可以对前端开发者有所帮助。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c83ccdc64669dde4dd6

阅读全文

猜你喜欢

  • npm 包 bootstrap-waterfall 使用教程

    前言 Bootstrap-waterfall 是一个基于 Bootstrap 的响应式瀑布流插件，可以帮助前端开发者快速实现页面图片瀑布流效果，不需要手动计算图片位置，支持图片懒加载，是一个非常方便实...

    4 年前
  • npm 包 bottender-recognizer 使用教程

    在前端开发过程中，我们通常需要与用户进行交互。而通过 chat bot 技术，则能够帮助我们自动地完成这个任务。而在 chat bot 技术中，识别用户输入的文字则是一个重要的步骤。

    4 年前
  • npm 包 bottle-service 使用教程

    1. 什么是 bottle-service？ bottle-service 是一个方便快捷地创建 RESTful API 的 Node.js 模块，它可以使你的开发变得更加高效、简单。

    4 年前
  • npm 包 bottom 使用教程

    前言 随着 Node.js 生态圈的不断发展，npm 包已经成为了前端工程师日常工作中不可或缺的技术之一。而其中一个非常有用的 npm 包就是 bottom，本文将详细介绍如何使用 bottom 包。

    4 年前
  • npm 包 bootstrap-v4-dev-rtl 使用教程

    简介 Bootstrap是目前最流行的前端UI框架之一，支持响应式布局，常用于快速构建网站和Web应用。但是，Bootstrap的默认布局是从左向右的，对于从右向左的语言，如阿拉伯语、波斯语、希伯来语...

    4 年前
  • npm 包 bootstrap-v4-webpack 使用教程

    在前端开发中，经常需要使用到基础的 CSS 框架来快速地完成网站的布局。其中，Bootstrap 是最常用的 CSS 框架之一。而在开发中，使用 webpack 来构建项目已经很常见了，所以本文将为大...

    4 年前
  • npm包bottom-dock使用教程

    前言 在前端开发中，底部浮动栏(bottom dock)已经是一个很常见的UI组件了。如果我们每次都从零开始重新开发这个组件，那么将会浪费许多时间和精力。幸好，社区中已经有了许多成熟的npm包来帮助我...

    4 年前
  • npm 包 bottom_line 使用教程

    如果你正在寻找一个方便快捷的工具来为你的网站添加一个底部导航条，那么 npm 包 bottom_line 可能是你需要的工具。bottom_line 是一个轻量级的 npm 模块，专门为前端开发人员提...

    4 年前
  • npm 包 bootstrap-webpack-loader 使用教程

    在前端开发中，使用框架可以大大提高代码效率和编写速度。而 Bootstrap 是一个广泛使用的前端框架，它提供了许多组件和样式，可以快速构建美观的界面。本文将介绍如何使用 npm 包 bootstra...

    4 年前
  • npm 包 bootstrap-wysiwyg 使用教程

    前言 在 web 前端开发过程中，文本编辑器是一个必不可少的工具。bootstrap-wysiwyg（所见即所得文本编辑器）是一款基于 bootstrap 的优秀文本编辑器，具有健壮的功能和高度的自定...

    4 年前
  • npm 包 brain-pact 使用教程

    简介 brain-pact 是一个基于 JavaScript 和 Node.js 的编程语言，为前端开发提供了一个丰富的测试框架。它可以让前端开发者轻松地编写测试用例，进行单元、集成和功能测试，从而提...

    4 年前
  • npm 包 brain-sticker 使用教程

    介绍 brain-sticker 是一款基于 tensorflow.js 开发的 JavaScript 库，提供了强大的机器学习功能，能够帮助开发者训练和部署机器学习模型，以解决前端领域的一些实际问题...

    4 年前
  • npm 包 brain-train 使用教程

    Brain-train 是一个基于 JavaScript 的 npm 包，它可以帮助我们训练我们的大脑，以提高我们的认知能力和持续注意力。这个包是基于一种类似于数独的游戏，利用颜色和数字来测试和锻炼大...

    4 年前
  • npm 包 brain_es6 使用教程

    简介 在前端开发中，我们经常需要使用人工智能技术来完成一些自动化的任务。为了方便大家使用这些技术，现在推荐一款名为 brain_es6 的 npm 包，它可以用 JavaScript 编写的神经网络来...

    4 年前
  • npm 包 brain_games_1202 使用教程

    npm 是 Node.js 的软件包管理器，它可以帮助我们轻松地获取和管理各种 JavaScript 库和工具。而 brain_games_1202 是一个基于命令行的小游戏集合，包括数学、英语、逻辑...

    4 年前
  • npm 包 brain_games_by_dk 使用教程

    前言 brain_games_by_dk 是一个由作者 dk 制作的集成多个小游戏的 npm 包，目前已经有猜数字和猜词游戏。本文将为您详细介绍该 npm 包的使用教程，并学习到其内部机制的实现思路。

    4 年前
  • npm 包 brain_games_ermo4enkov 使用教程

    简介 brain_games_ermo4enkov 是一个 npm 包，可以让你在命令行上玩一系列小游戏，包括以下游戏： brain-even brain-calc brain-gcd brain-...

    4 年前
  • npm 包 brain_games_r 使用教程

    介绍 brain_games_r 是一个基于命令行的 Javascript 游戏集合，其中包括了五个益智游戏，适合前端开发者进行学习和娱乐。该 npm 包提供了界面化的游戏环境，并且可以根据个人设置来...

    4 年前
  • npm 包 botyo-command-reverse-image-search 使用教程

    随着互联网技术的不断发展，图片的应用越来越广泛。借助图像搜索引擎，用户可以通过一张图片，找到其在互联网上的相关信息。本文将介绍一款 npm 包——botyo-command-reverse-image...

    4 年前
  • npm 包 bootstrap3 使用教程

    前言 Bootstrap3 是一款经典的开源 CSS 框架，提供了丰富的 HTML、CSS 和 JavaScript 组件，使得开发人员能够快速地构建优美且响应式的网页应用程序。

    4 年前

相关推荐

    暂无文章