Comment taper le code de vérification en javascript

Le code pour vérifier le code de vérification en JavaScript fait référence à l'utilisation du langage JavaScript dans la page Web pour implémenter la fonction de vérification du code de vérification. Le code de vérification est un mécanisme de protection de sécurité qui affiche principalement certains caractères/chiffres aléatoires et complexes sur les pages Web via des graphiques, du texte, etc., et oblige les utilisateurs à saisir des informations correctes selon les invites pour prouver leur identité ou empêcher les opérations malveillantes de la machine.

D'une manière générale, le code de vérification du code de vérification sur la page Web peut être divisé en deux parties : générer le code de vérification et vérifier le code de vérification.

1. Générer un code de vérification

JavaScript peut générer un code de vérification à l'aide d'éléments Canvas ou DOM.

1. Utilisez Canvas

//生成随机字符串
function createCode() {
  var code = "";
  var codeLength = 4; //验证码长度
  var charList = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
  for (var i = 0; i < codeLength; i++) {
    var randomCharIndex = Math.floor(Math.random() * charList.length);
    code += charList[randomCharIndex];
  }
  return code;
}

//设置背景颜色
function drawBackground(ctx) {
  ctx.fillStyle = "#eee"; //背景颜色
  ctx.fillRect(0, 0, 80, 28); //画出矩形背景
}

//画出随机字符串
function drawCode(ctx, code) {
  ctx.fillStyle = "#000"; //字符串颜色
  ctx.font = "24px Arial"; //字体大小和字体
  ctx.fillText(code, 10, 22); //绘制文字
}

//生成验证码
function createCheckCode() {
  var canvas = document.getElementById("checkCodeCanvas");
  var ctx = canvas.getContext("2d");
  drawBackground(ctx);
  var code = createCode();
  drawCode(ctx, code);
  return code; //将生成的验证码返回
}

2. Utilisez des éléments DOM

//生成随机字符串
function createCode() {
  var code = "";
  var codeLength = 4; //验证码长度
  var charList = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
  for (var i = 0; i < codeLength; i++) {
    var randomCharIndex = Math.floor(Math.random() * charList.length);
    code += charList[randomCharIndex];
  }
  return code;
}

//生成验证码图片
function createCheckCode() {
  var code = createCode();
  var checkCodeImg = document.getElementById("checkCodeImg");
  checkCodeImg.src = "checkCode.php?code=" + code;
  return code; //将生成的验证码返回
}

2. Vérifiez le code de vérification

La vérification du code de vérification est principalement obtenue en jugeant si la valeur saisie par l'utilisateur dans la zone de saisie est cohérente avec le chaîne aléatoire générée.

function validateCheckCode() {
  var inputCode = document.getElementById("inputCode").value.trim().toLowerCase();
  var checkCode = document.getElementById("checkCode").value.toLowerCase(); //checkCode是之前生成的随机字符串
  if (inputCode.length <= 0) {
    alert("请输入验证码！");
    return false;
  } else if (inputCode != checkCode) {
    alert("验证码错误！请重新输入！");
    createCheckCode(); //生成新的验证码
    document.getElementById("inputCode").value = ""; //清空输入框
    return false;
  } else {
    alert("验证码正确！");
    return true;
  }
}

Ce qui précède est le code pour générer et vérifier le code de vérification en JavaScript. Il convient de noter que même si le code de vérification peut empêcher dans une certaine mesure les accès malveillants provoqués par la machine, il entraînera également un certain degré de problèmes d'expérience utilisateur, vous devez donc peser le pour et le contre lors de son utilisation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!