npm 包 jm-verifycode 使用教程

阅读时长 3 分钟读完

前言

开发一个验证码一般需要涉及到图片生成,干扰线,干扰点等技术,而 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

纠错
反馈