자바스크립트에서 인증번호 입력하는 방법

JavaScript에서 인증코드를 확인하는 코드는 웹페이지에서 JavaScript 언어를 사용하여 인증코드 인증 기능을 구현하는 것을 의미합니다. 인증 코드는 그래픽, 텍스트 등을 통해 웹 페이지에 임의의 복잡한 문자/숫자를 주로 표시하는 보안 보호 메커니즘으로, 사용자는 자신의 신원을 증명하거나 기기의 악의적인 작동을 방지하기 위해 프롬프트에 따라 올바른 정보를 입력해야 합니다.

일반적으로 웹페이지에서 인증코드를 확인하는 코드는 인증코드 생성과 인증코드 확인 두 부분으로 나눌 수 있습니다.

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

위는 자바스크립트로 인증코드를 생성하고 검증하는 코드입니다. 인증 코드는 기계로 인한 악의적인 액세스를 어느 정도 방지할 수 있지만 어느 정도 사용자 경험 문제를 야기하므로 사용 시 장단점을 저울질해야 한다는 점에 유의해야 합니다.

위 내용은 자바스크립트에서 인증번호 입력하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!