javascript自定义九宫格网格验证码插件

使用方法

const captchaContainer = document.querySelector("#captchaContainer");
const captchaInput = document.querySelector("#captchaInput");
const mainForm = document.querySelector("#mainForm");
const resultCapcha = document.querySelector("#resultCapcha");
const patternDrowPolyline = document.querySelector("#patternDrowPolyline");
const gridCount = 9;

let result = "";

const createCaptcha = () => {
  var points = "";
  var markCount = 0;
  var captchaItemList = []; 

  for (let i = 0; i < gridCount; i++) {
    var captchaItem = document.createElement("div");
    captchaItem.classList.add("captcha-item");
    // captchaItem.id = `captcha-item-${i}`;

    const randNum = Math.random().toString(20).substr(2, 1);
    
    captchaContainer.appendChild(captchaItem);
    captchaItem.innerHTML = randNum;
  }
    
  const captchaItemId = document.getElementsByClassName("captcha-item");


    while(markCount < 5){
        let selectCaptchaItem = Math.floor(Math.random() * 8);
        
        if(captchaItemList.includes(selectCaptchaItem) == false){
            captchaItemList.push(selectCaptchaItem);
            captchaItemId[selectCaptchaItem].classList.add("marked");
            markCount++;
        }
    }

    captchaItemList.sort();

    captchaItemList.forEach(element => {
        switch (element) {
            case 0:
            points += "40,40,";
            break;
            case 1:
            points += "125,40,";
            break;
            case 2:
            points += "210,40,";
            break;
            case 3:
            points += "40,120,";
            break;
            case 4:
            points += "125,120,";
            break;
            case 5:
            points += "210,120,";
            break;
            case 6:
            points += "40,210,";
            break;
            case 7:
            points += "125,210,";
            break;
            case 8:
            points += "210,210,";
            break;
        }

        result += captchaItemId[element].innerHTML;    
    });
    patternDrowPolyline.innerHTML = ("<polyline points='" + points + "' style='fill:none;stroke:rgb(38, 216, 2);stroke-width:3' />");
    console.log(captchaItemList);
      

    // }
  // alert(points);
//   patternDrowPolyline.innerHTML = ("<polyline points='" + points + "' style='fill:none;stroke:rgb(38, 216, 2);stroke-width:3' />");
};

createCaptcha();

captchaInput.addEventListener("input", () => {
  // alert('val'+captchaInput.value );
  // alert('res'+result );
  if (captchaInput.value != result) {
    captchaInput.classList.add("wrong-captcha");
    resultCapcha.innerHTML = "Wrong Captcha";
    resultCapcha.classList.add("captcha-wrong");
    resultCapcha.classList.remove("captcha-success");
  } else {
    captchaInput.classList.remove("wrong-captcha");
    resultCapcha.classList.remove("captcha-wrong");
    resultCapcha.classList.add("captcha-success");
    resultCapcha.innerHTML = "Captcha Verified";
  }
});

// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("submit");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var message = document.getElementById("message");

btn.onclick = function() {
  if (captchaInput.value != result) {
    modal.style.display = "block";
    message.innerHTML = "Wrong Captcha!! Try again"
    message.style.color = "red";
  } else {
    modal.style.display = "block";
    message.innerHTML = "Captcha Varified"
    message.style.color = "green";
  }
}

span.onclick = function() {
  modal.style.display = "none";
}

// mainForm.addEventListener("submit", (e) => {
//   if (
//     captchaInput.classList.contains("wrong-captcha") ||
//     (!captchaInput.value.length && result.length)
//   ) {
//     e.preventDefault();
//   }
// });