JavaScriptで認証コードを入力する方法

JavaScriptで検証コードを検証するコードとは、JavaScript言語を使用してWebページに検証コード検証を実装する機能を指します。検証コードは、主にグラフィックやテキストなどを通じて Web ページ上にランダムで複雑な文字/数字を表示し、ユーザーが身元を証明したり、マシンの悪意のある操作を防止したりするために、プロンプトに従って正しい情報を入力することを要求するセキュリティ保護メカニズムです。

一般的に、Web ページ上の検証コードを検証するコードは、検証コードの生成と検証コードの検証の 2 つの部分に分けることができます。

1. 検証コードの生成

JavaScript を使用して、Canvas または DOM 要素を使用して検証コードを生成できます。

1. 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. 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. 検証検証コード

検証検証このコードは主に、ユーザーが入力ボックスに入力した値が、生成されたランダムな文字列と一致するかどうかを判断することによって実装されます。

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

上記はJavaScriptで検証コードを生成して検証するコードです。なお、認証コードは機械による悪意のあるアクセスをある程度防ぐことができますが、ユーザーエクスペリエンスに一定の問題を引き起こすため、メリットとデメリットを考慮して使用する必要があります。

以上がJavaScriptで認証コードを入力する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。