案例分享--NodeJs制作随机验证码

二. 需要引用的模块 svg-captcha
用cmd打开项目文件 执行语句:

npm i svg-captcha

三. 使用方法
在NodeJS中

const captcha = require("svg-captcha")//1.引入的模块
//获取验证码
router.get("/getCaptcha", function (req, res ,next){
  const cap = captcha.create({
    size: 4 ,//长度
    ignoreChars:"0o1il",//排除字符
    noise:3,//干扰线条数
    width: 120, // 宽度
    height: 36, // 高度
    color: true, // 验证码字符是否有颜色，默认是没有,如果设置了背景颜色，那么默认就是有字符颜色
    background: "#fff", // 背景色 可以自己改
  })
  //记录验证码文字
  req.session.captcha = cap.text
  res.type("svg")//响应类型
  res.send(cap.data)
})

//验证码验证
router.get("/verifyCaptcha", function (req ,res){
  console.log("验证码:", req.query.code, req.session.captcha)

  if(req.query.code.toLowerCase() == req.session.captcha.toLowerCase()){
    res.json({
      msg:"验证码是对的",
      code:200,
    })
  }else{
    res.json({
      msg:"验证码错误",
      code:1001,
    })
  }
})

在JavaScript中

    //验证
    $('#codeInput').on('blur',function(){
      if($(this).val().length !=4){//验证码不够4位
        return alert('验证码格式错误')
      }

      $.ajax({
        url:'/users/verifyCaptcha',
        method:'GET',
        data:{
          code:$(this).val()
        }
      })
      .done(res =>{
        console.log('验证成功',res)
        if(res.code == 200){
          codeState = true
        }
      })
      .fail(err => {
        console.log('验证错误: ', err)
      })
    })
    //点击更换验证码
    $('#codeImg').on('click', function() {
      $(this).prop('src','/users/getCaptcha?=t'+Date.now())
    })

在html中
引用了layui 和 jQuery 版本不限 记得引入哦

  <form class="layui-form">
    <div class="input-group">
      <input type="text" placeholder="请输入账号" class="layui-input" id="username">
    </div>
    <div class="input-group">
      <input type="password" placeholder="请输入密码" class="layui-input" id="password">
    </div>
    <div class="layui-inline input-group">
      <div class="layui-input-inline" style="width: 100px;">
        <input type="text" class="layui-input" placeholder="请输入验证码" id="codeInput">
      </div>
      <img src="/users/getCaptcha" alt="点击获取验证码" id="codeImg">
    </div>
    <button type="button" class="layui-btn" id="loginBtn">登录</button>
  </form>

实现效果

还没有软件么 在这里看如何安装nodejs
nodejs的基本使用
nodejs的服务器框架