So geben Sie den Bestätigungscode in Javascript ein

Der Code zur Überprüfung des Bestätigungscodes in JavaScript bezieht sich auf die Verwendung der JavaScript-Sprache auf der Webseite, um die Funktion zur Überprüfung des Bestätigungscodes zu implementieren. Der Verifizierungscode ist ein Sicherheitsschutzmechanismus, der hauptsächlich einige zufällige und komplexe Zeichen/Zahlen auf Webseiten durch Grafiken, Text usw. anzeigt und Benutzer dazu auffordert, korrekte Informationen gemäß den Aufforderungen einzugeben, um ihre Identität nachzuweisen oder böswillige Operationen des Geräts zu verhindern.

Im Allgemeinen kann der Code zur Überprüfung des Bestätigungscodes auf der Webseite in zwei Teile unterteilt werden: Generieren des Bestätigungscodes und Überprüfen des Bestätigungscodes.

1. Bestätigungscode generieren

JavaScript kann mithilfe von Canvas- oder DOM-Elementen Bestätigungscode generieren.

1. Canvas verwenden

//生成随机字符串
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. DOM-Elemente verwenden

//生成随机字符串
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. Überprüfen Sie den Bestätigungscode

Die Überprüfung des Bestätigungscodes erfolgt hauptsächlich durch Beurteilung, ob der vom Benutzer in das Eingabefeld eingegebene Wert mit dem übereinstimmt generierte Zufallszeichenfolge.

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;
  }
}

Das Obige ist der Code zum Generieren und Überprüfen des Bestätigungscodes in JavaScript. Es ist zu beachten, dass der Bestätigungscode zwar bis zu einem gewissen Grad böswilligen Zugriff durch die Maschine verhindern kann, aber auch gewisse Probleme mit der Benutzererfahrung mit sich bringt. Daher müssen Sie bei der Verwendung die Vor- und Nachteile abwägen.

Das obige ist der detaillierte Inhalt vonSo geben Sie den Bestätigungscode in Javascript ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!