JS表单算术验证示例代码

给网站加一个算术验证表单，验证通过才能继续操作。JS版本的，所以前端可以直接看到密码，你可以加密js代码或AJAX前后端分离的判断方法，来隐藏掉判断逻辑和密码，此代码只供前端示例。

HTML表单代码

<form id="verification-form">
      <label id="question-label" class="question-label" for="answer">请回答下面的算术题：</label>
      <input type="text" id="answer" required>
      <br>
      <button type="submit">提交</button>
    </form>

JS验证判断代码

<script>
    var question = null; // 存储当前题目
    
    // 生成加减法算术题
    function generateQuestion() {
      var num1 = Math.floor(Math.random() * 10) + 1;
      var num2 = Math.floor(Math.random() * 10) + 1;
      var operator = Math.random() < 0.5 ? '+' : '-';
      var questionText = num1 + operator + num2;
      var answer = operator === '+' ? num1 + num2 : num1 - num2;
      return {
        question: questionText,
        answer: answer
      };
    }
    // 显示题目
    function displayQuestion() {
      question = generateQuestion();
      var questionLabel = document.getElementById('question-label');
      questionLabel.textContent = '请回答下面的算术题：' + question.question;
    }
    // 验证算术题答案
    function verifyAnswer(event) {
      event.preventDefault();
      var userAnswer = parseInt(document.getElementById('answer').value, 10);
      if (userAnswer === question.answer) {
        alert('验证通过！');
        redirect('https://www.wdzzz.com/'); // 调用跳转函数
      } else {
        alert('验证失败，请重新回答！');
      }
      document.getElementById('verification-form').reset();
      displayQuestion();
    }
    
    // 页面跳转函数
    function redirect(url) {
      window.location.href = url;
    }
    // 初始化页面，显示第一个题目
    displayQuestion();
    // 监听表单提交事件
    document.getElementById('verification-form').addEventListener('submit', verifyAnswer);
  </script>

代码释义

JS代码会在ID为question-label的标签内会生成一道算术题，如：请回答下面的算术题：5-3，算数结果填在ID为answer的input内进行判断，正确就执行

alert('验证通过！');
        redirect('https://www.wdzzz.com/'); // 调用跳转函数

当然，最后的逻辑可以自行修改。