npm 包 jm-verifycode 使用教程

前言

开发一个验证码一般需要涉及到图片生成,干扰线,干扰点等技术,而 jm-verifycode 包可以让我们轻松快捷地生成验证码图片,减少我们的开发成本,提高开发效率。

安装

使用 npm 安装 jm-verifycode:

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

使用

引用 jm-verifycode:

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

生成验证码

生成验证码图片:

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

默认参数:

  • length: 验证码长度,默认为 4。
  • mode: 验证码模式(1:数字,2:字母,3:数字字母混合),默认为 1。
  • complexity: 验证码的复杂度(1:简单,2:中等,3:困难),默认为 2。

可以通过设置额外的参数自定义验证码:

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

以上设置的参数作用如下:

  • length: 验证码长度,默认为 4。
  • mode: 验证码模式(1:数字,2:字母,3:数字字母混合),默认为 1。
  • complexity: 验证码的复杂度(1:简单,2:中等,3:困难),默认为 2。
  • fontSize: 验证码字体大小,默认为 30。
  • width: 验证码图片宽度,默认为 120。
  • height: 验证码图片高度,默认为 50。
  • bgColor: 验证码图片背景颜色,默认为 #ffffff。
  • fontStyle: 验证码字体样式(italicnormal),默认为 italic
  • fontColor: 验证码字体颜色,默认为 #000000。
  • offset: 干扰线和点的偏移度,默认为 20。
  • quality: 验证码图片质量,默认为 100。

验证验证码

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

参数:

  • code: 验证码,包含以下两个属性。
    • code: 验证码字符串。
    • timemark: 时间戳。
  • userCode: 用户输入的验证码字符串。

返回值:

  • true:验证成功。
  • false:验证失败。

示例代码

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

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

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

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

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

总结

通过使用 jm-verifycode,我们可以轻松地生成验证码图片,并且可以自定义验证参数,同时,该包还提供了验证码验证的方法,有效帮助我们减少验证码开发的成本,提高开发效率。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60056b4681e8991b448e5469


猜你喜欢

  • npm 包 lung-storybook-addon-intl 使用教程

    什么是 lung-storybook-addon-intl lung-storybook-addon-intl 是一个 Storybook 的插件,用于在 React 组件中集成多语言支持功能。

    3 年前
  • npm 包 @cwmoo740/react-infinite 使用教程

    前端开发涉及到的技术越来越多,而一些优秀的 npm 包的出现能够让前端开发变得更加高效和简单。在前端开发中,无限滚动是一个非常常见的需求,因此 @cwmoo740/react-infinite 就是一...

    3 年前
  • npm 包 tsguard 使用教程

    介绍 tsguard 是一款 TypeScript 的静态类型检查工具。它能够检查出代码中潜在的类型错误,从而提高代码的质量和稳定性。该工具支持许多功能,如变量类型的检查、函数参数类型的检查等。

    3 年前
  • npm 包 like-json-loader 使用教程

    前言 在前端开发中,JSON 是开发者们最常用的数据格式之一。在使用 webpack 等工具进行打包时,我们经常需要使用 JSON 文件作为输入。如果项目中的 JSON 文件较为庞大,直接引入会导致代...

    3 年前
  • npm 包 iRedium 使用教程

    在前端开发中,我们经常需要使用一些优秀的工具来帮助我们提高开发效率。而 npm 包则是前端开发中常用的一种工具。其中,iRedium 就是一款非常实用的 npm 包,它可以帮助我们快速创建基于 Nod...

    3 年前
  • npm 包 @cxu/censorify 使用教程

    在前端开发的过程中,我们经常需要对用户输入的敏感内容进行过滤,例如屏蔽不当的言论或色情内容等。此时,我们就需要使用到一个非常方便的 npm 包:@cxu/censorify。

    3 年前
  • npm 包 spawn-promise-wrapper 使用教程

    在前端开发中,经常需要在 Node.js 环境中执行子进程,比如调用其他命令行工具或者执行其他脚本。这时可以使用 Node.js 内置的 child_process 模块来实现。

    3 年前
  • npm 包 ghost-s3-file-storage 使用教程

    如果你正在使用 Ghost,而且想将图片存储到 Amazon S3 中,那么 ghost-s3-file-storage 这个 npm 包就可以帮助你完成这项工作。

    3 年前
  • npm 包 tiny-dom-helpers 使用教程

    在前端开发中,操作 DOM 是一个经常会遇到的事情。但是,随着项目的复杂度增加,操作 DOM 的难度也增加了。这时候,我们可能需要一些工具函数来帮助我们简化操作 DOM 的流程。

    3 年前
  • npm包bad-uno的使用教程

    在前端开发过程中,我们经常需要使用到一些优秀的第三方工具库来减少我们的工作量和提高代码的可维护性。而npm作为前端工程化的重要组成部分,已经成为了前端开发中不可或缺的工具。

    3 年前
  • npm 包 @amd-core/mongoose-ts 使用教程

    在前端开发中,使用数据库是必不可少的一部分,而 Node.js 实现了 JavaScript 端与数据库之间的连接。Mongoose 是 Node.js 的一种强大的 MongoDB Object D...

    3 年前
  • npm 包 samritabakshi 的使用教程

    简介 npm 是 Node.js 的包管理工具,其中包括了大量的前端类库和工具。Samritabakshi 是一个优秀的 npm 包,可以帮助前端开发者在项目中更加简便和高效地处理数据。

    3 年前
  • npm 包 @dogu/nodejs-hello-world 使用教程

    前言 在前端开发中,Node.js 作为一款非常流行的工具,可以用来开发后端、构建打包工具、自动化部署工具等等。而 npm 则成为最常用的依赖管理工具之一,它为 Node.js 上的包提供了一个便捷的...

    3 年前
  • npm 包 gun.db 使用教程

    对于前端数据存储的需求,我们通常会使用如 IndexedDB、LocalStorage 等浏览器自带的存储方案。然而这些方案都存在一定的限制,譬如 IndexedDB 只能存储结构化数据,LocalS...

    3 年前
  • npm 包 @databraid/env-util 使用教程

    简介 在应用程序的开发和部署中,环境变量是一个不可忽视的部分。环境变量可以提供处理应用程序中不同环境的能力。在前端开发中,我们通常使用环境变量来区分开发环境、测试环境和生产环境等等。

    3 年前
  • npm 包 i-input-css 使用教程

    前言 在前端开发中,表单输入框是非常常见的组件。i-input-css 是一个能够轻松定制表单输入框的 npm 包,这篇文章将详细介绍如何使用这个包。 安装 i-input-css 使用 i-inpu...

    3 年前
  • npm包 es6-dom-helper 使用教程

    介绍 es6-dom-helper是一个用于简化DOM操作的npm包,提供了一系列API来方便地进行常见的DOM操作,比如增加、删除、查询节点等。使用es6语法,让DOM操作更加简单易懂。

    3 年前
  • npm 包 openapi3-util 使用教程

    前言 随着微服务的流行,越来越多的公司选择使用 OpenAPI 3.0 标准来描述 API 接口。但是,对于前端工程师来说,如何在开发中使用 OpenAPI 3.0 规范的文档就成了一个难题。

    3 年前
  • npm 包 ngx-duality 使用教程

    介绍 ngx-duality 是一个基于 Angular 框架开发的双重(双层)选择器。它的功能非常强大,支持自定义选项以及拖动、搜索等交互操作,也是前端开发中非常实用的工具。

    3 年前
  • npm 包 ember-cchain-ui 使用教程

    Ember-cchain-ui 是一个适用于 Ember.js 的 UI 组件库,包含了常用的 UI 组件例如 Modal、Tabs、Button 等,使用方便且易于个性化定制。

    3 年前

相关推荐

    暂无文章