gVerify验证码

1、引入js文件

2、实现

<%--
  Created by IntelliJ IDEA.
  User: a
  Date: 2019/8/28
  Time: 10:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/gVerify.js"></script>
  </head>
  <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>
  <!--导入js文件-->
  <script>
    //1创建验证码对象
    var verifyCode = new GVerify("v_container");
    //2为按钮绑定一个事件
    document.getElementById("my_button").onclick = function(){
     //3编写单击验证按钮后触发的行为
      //3.1验证输入框中的值与验证码对象中的值是否一致
      var res = verifyCode.validate(document.getElementById("code_input").value);
      if(res){
        alert("验证正确");
      }else{
        alert("验证码错误");
      }
    }
  </script>

  </body>
</html>

 

posted @ 2019-08-28 21:32  勤奋的园  阅读(409)  评论(0)  编辑  收藏  举报