Bagaimana untuk menaip kod pengesahan dalam javascript

Kod untuk mengesahkan kod pengesahan dalam JavaScript merujuk kepada penggunaan bahasa JavaScript dalam halaman web untuk melaksanakan fungsi pengesahan kod pengesahan. Kod pengesahan ialah mekanisme perlindungan keselamatan yang terutamanya memaparkan beberapa aksara/nombor rawak dan kompleks pada halaman web melalui grafik, teks, dsb., dan memerlukan pengguna memasukkan maklumat yang betul mengikut gesaan untuk membuktikan identiti mereka atau menghalang operasi mesin yang berniat jahat.

Secara umumnya, kod untuk mengesahkan kod pengesahan pada halaman web boleh dibahagikan kepada dua bahagian: menjana kod pengesahan dan mengesahkan kod pengesahan.

1. Jana kod pengesahan

JavaScript boleh menggunakan elemen Kanvas atau DOM untuk menjana kod pengesahan.

1. Gunakan Kanvas

//生成随机字符串
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. Gunakan elemen 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. Kod Pengesahan Pengesahan

Pengesahan Pengesahan Kod ini dilaksanakan terutamanya dengan menilai sama ada nilai yang dimasukkan oleh pengguna dalam kotak input adalah konsisten dengan rentetan rawak yang dijana.

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

Di atas ialah kod untuk menjana dan mengesahkan kod pengesahan dalam JavaScript. Perlu diingat bahawa walaupun kod pengesahan boleh menghalang akses berniat jahat yang disebabkan oleh mesin pada tahap tertentu, ia juga akan membawa masalah pengalaman pengguna pada tahap tertentu, jadi anda perlu menimbang kebaikan dan keburukan apabila menggunakannya.

Atas ialah kandungan terperinci Bagaimana untuk menaip kod pengesahan dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!