js教程

JS表单算术验证示例代码

我的站长站 2023-09-27 人阅读

给网站加一个算术验证表单,验证通过才能继续操作。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/'); // 调用跳转函数

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

相关推荐
  • js代码
  • JS表单
  • js指定时间定时自动执行代码分享

    示例代码用的`setTimeout()`函数,在指定的时间后执行。代码非常的简单,获取当前时间和设定一个指定时间,指定时间减去当前时间就是定时的时间,如果定时器到期时等于0,就代表时间到了,就运行executeAtTime函数的方法。function executeAtTime() { console....

    js教程 96 1年前
  • JS代码解除网页右键限制

    JS解除右键限制方法一javascript:(function () {function R(a) {ona = "on" + a;if (window.addEventListener){window.addEventListener(a, function (e) {for (var n = e.originalTarget; n; n = n.parentNode){n[ona] = null;}}, true);}window[o...

    js教程 202 4年前
  • 淘宝买家秀API+ajax代码

    淘宝买家秀API+ajax代码,用的是这个API,https://api.66mz8.com/api/rand.tbimg.php?format=jsonJSON返回格式,测试依旧可用。$(function(){ $.get('https://api.66mz8.com/api/rand.tbimg.php?format=json',function(data){ document.getElementB...

    js教程 747 4年前
  • JS表单算术验证示例代码

    给网站加一个算术验证表单,验证通过才能继续操作。JS版本的,所以前端可以直接看到密码,你可以加密JS代码或ajax前后端分离的判断方法,来隐藏掉判断逻辑和密码,此代码只供前端示例。HTML表单代码<form id="verification-form"> <label id="question-l...

    js教程 53 1年前
  • js提交form表单方法

    方法一:JS判断提交js函数function checkUser(){var result = document.getElementById("userid").value;var password = document.getElementById("userpassid").value;if(result == "" ){alert("用户名不能为空");return false;}if(password == &quo...

    js教程 21 2年前
最新更新
  • js返回上一页、刷新页面代码大全

    返回上一页代码:<a href="javascript:history.go(-1)">返回上一页</a>onclick返回上一页代码:<a href="javasc...

    js教程 29分钟前
  • js语言!=与!==的区别

    != (不等于)!= 是松散的不等于运算符。它在比较两个值时,会先进行类型转换(type coercion),然后再比较值是否不...

    js教程 4天前
  • JS防止网站被扒的解决方法

    这个代码能够直接保护整个站,而不再是单个页面,直接把代码放到自己的网站上,如果是博客建议放到header.php头部...

    js教程 2周前
  • Hexo插件开发实战教程

    Hexo的插件嵌入有两种方式,一种是通过脚本(Scripts)的方式引入,一种是通过插件(Packages)的方式将自定义的插件内...

    js教程 1个月前
  • JavaScript定时删除指定元素方法

    JavaScript定时删除指定元素一般用到自动隐藏的效果功能上面,主要用到了JS的setTimeout语法。下面是一个定时...

    js教程 1个月前