Graph-validate-lib NPM

graph-validate-lib

图形验证库提供随机字符、滑块、文字点选、数字计算、滑动图片等验证功能的图形化 UI 库

randomBlock

随机字符验证

new randomBlock(
  {
    container: document.getElementById("block"),
    line: true,
    point: true,
    fill: true,
    fontSize: 50,
    charNum: 5,
    factor: "1234567890",
  },
  function (randomStr) {
    console.log(randomStr);
  }
);

参数	说明	默认值
container	DOM 节点	-
line	干扰线	false
point	噪点	false
fill	字体填充	false
fontSize	字体大小	50
charNum	随机字符数量	4
factor	随机因子	ABCDEFGHIJKL...
callback	回调函数，返回当前随机字符	-

Slider

滑块验证

new lib.slider(
  { container, title: "sliding unlock", success: "unlock" },
  (res) => {
    console.log("[debug]res:", res);
  }
);

参数	说明	默认值
container	DOM 节点	-
title	默认展示文案	滑动解锁
success	成功文案	解锁成功

TextClick

文字点选验证

new lib.TextClick(
  {
    container: document.getElementById("app"),
    width: 400,
    height: 200,
    images: [
      "https://th.bing.com/th/id/OIP.2gS4UgpMqzgMv_WcelDaZwAAAA?pid=ImgDet&rs=1",
      "https://th.bing.com/th/id/OIP.W3ZzYPC0KT8ijxyc-1wpGAAAAA?pid=ImgDet&rs=1",
      "https://th.bing.com/th/id/R.0233d6fa7a283ac2cc9adbbce09b2150?rik=mAI8iultzrL3OQ&pid=ImgRaw&r=0&sres=1&sresct=1",
    ],
    fontStr: "冒菜火锅麻辣烫全部都好吃",
  },
  function (res) {
    console.log("[debug]res:", res);
  }
);

参数	说明	默认值
container	DOM 节点	-
width	宽度	320
height	高度	160
fontStr	字符串预选池	1234567890
fontNum	字符数量	5
checkNum	校验数量	3
accuracy	精度	15
images	图片 URL 列表	[]

RandomCalc

计算验证

new lib.RandomCalc(
  {
    container: document.getElementById("app"),
    width: 320,
    height: 60,
  },
  function (res) {
    console.log("[debug]res:", res);
  }
);

参数	说明	默认值
container	DOM 节点	-
width	宽度	320
height	高度	60
range	数值区间	100
operator	运算符列表	"+", "-"

SliderImg

滑动图片验证

new lib.SliderImg(
  {
    container: document.getElementById("app"),
    width: 320,
    height: 160,
    images: [
      "https://th.bing.com/th/id/OIP.2gS4UgpMqzgMv_WcelDaZwAAAA?pid=ImgDet&rs=1",
      "https://th.bing.com/th/id/OIP.W3ZzYPC0KT8ijxyc-1wpGAAAAA?pid=ImgDet&rs=1",
      "https://th.bing.com/th/id/R.0233d6fa7a283ac2cc9adbbce09b2150?rik=mAI8iultzrL3OQ&pid=ImgRaw&r=0&sres=1&sresct=1",
    ],
  },
  function (res) {
    console.log("[debug]res:", res);
  }
);