jsp页面验证码功能

最新推荐文章于 2021-10-17 23:06:26 发布

半坡人

最新推荐文章于 2021-10-17 23:06:26 发布

阅读量309

点赞数

分类专栏： jsp js

本文链接：https://blog.csdn.net/sy755754582/article/details/88822774

版权

jsp 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

文章目录

- - jsp页面验证码功能

jsp页面验证码功能

首先看看效果

输入正确：

错误输入：

第一步：导入js文件

在这里插入图片描述
在index.jsp头部插入：

第二步：在index.jsp中编写如下代码

  <body>
  
  <center>
    <div id="v_container" style="width: 200px;height: 50px;"></div>
    <input type="text" id="code_input" value="" placeholder="请输入验证码"/><button id="my_button">验证</button>
  </center>
  
  <%--这个函数一定要写在调用源的下面--%>
  <script>
      var verifyCode = new GVerify("v_container");
      document.getElementById("my_button").onclick = function(){
          var res = verifyCode.validate(document.getElementById("code_input").value);
          if(res){
              alert("验证正确");
               //此处可以编写跳转方向
          }else{
              alert("验证码错误");
          }
      }
  </script>

  </body>