JavaScript表单算术验证示例代码

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

HTML表单代码

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

JS验证判断代码

<script>varquestion=null;//存储当前题目//生成加减法算术题functiongenerateQuestion(){varnum1=Math.floor(Math.random()*10)+1;varnum2=Math.floor(Math.random()*10)+1;varoperator=Math.random()<0.5?'+':'-';varquestionText=num1+operator+num2;varanswer=operator==='+'?num1+num2:num1-num2;return{question:questionText,answer:answer};}//显示题目functiondisplayQuestion(){question=generateQuestion();varquestionLabel=document.getElementById('question-label');questionLabel.textContent='请回答下面的算术题：'+question.question;}//验证算术题答案functionverifyAnswer(event){event.preventDefault();varuserAnswer=parseInt(document.getElementById('answer').value,10);if(userAnswer===question.answer){alert('验证通过！');redirect('https://www.caijicaiji.com/');//调用跳转函数}else{alert('验证失败，请重新回答！');}document.getElementById('verification-form').reset();displayQuestion();}//页面跳转函数functionredirect(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.caijicaiji.com/');//调用跳转函数

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