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>
gVerify验证码的更多相关文章
- 纯JS实现图片验证码功能并兼容IE6-8
最近要搞一个图片验证码功能,但是又不想自己写后台代码.于是自己准备搞一个纯前端的验证码功能,于是网上搜索了一下,找到一个插件gVerify.js,简单好用,实现完美.不过后面接到说要兼容IE8,想想也 ...
- JS图片验证码
!(function(window, document) { var size = 5;//设置验证码长度 function GVerify(options) { //创建一个图形验证码对象,接收op ...
- Jquery 插件 图片验证码
摘自:https://www.cnblogs.com/lusufei/p/7746465.html !(function(window, document) { var size = 5;//设置验证 ...
- H5+JS生成验证码
效果图如下: <canvas id="canvas1" style="margin-left: 200px;"></canvas>< ...
- js-验证码插件gVerify.js
插件 gVerify.js 源码 !(function(window, document) { function GVerify(options) { //创建一个图形验证码对象,接收options对 ...
- 前端登录jq图形验证码
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" ...
- 利用canvas绘制带干扰线的验证码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS 验证码的实现
转自:https://github.com/ace0109/verifyCode 正要做一个验证码,网上找到这个还不错: gVerify.js: !(function(window, document ...
- .net点选验证码实现思路分享
哈哈好久没冒泡了,最进看见点选验证码有点意思,所以想自己写一个. 先上效果图 如果你被这个效果吸引了就请继续看下去. 贴代码前先说点思路: 1.要有一个汉字库,并按字形分类.(我在数据库里是安部首分类 ...
随机推荐
- 关于ajax 异步文件上传 node 文件后台接口
<body> <img src="" alt="" id="img"> <input type="f ...
- 用python+sklearn(机器学习)实现天气预报数据 模型和使用
用python+sklearn机器学习实现天气预报 模型和使用 项目地址 系列教程 0.前言 1.建立模型 a.准备 引入所需要的头文件 选择模型 选择评估方法 获取数据集 b.建立模型 c.获取模型 ...
- 【Nginx学习笔记】-初识Nginx
Nginx 目录 Nginx Nginx 特点 Nginx 基本功能 Nginx 使用场景 Nginx 安装/卸载 Docker 方式运行 Ubuntu上安装 卸载Nginx Nginx 命令 Ngi ...
- 如何使用 VS Code开发.NET Core应用程序
Visual Studio Code(VS Code)是Microsoft为Windows,Linux和Mac操作系统开发的免费,跨平台,轻量级的源代码编辑器,它是源代码编辑器,而Visual Stu ...
- Maven 中 install,package,deploy命令区别
mvn clean package依次执行了clean.resources.compile.testResources.testCompile.test.jar(打包)等7个命令. mvn clean ...
- 【SpringMVC】SpringMVC 实现文件上传
SpringMVC 实现文件上传 文章源码 文件上传回顾 查看 JavaWeb 阶段的文件上传下载 实现步骤: 客户端: 发送 post 请求,告诉服务器要上传什么文件 服务器: 要有一个 form ...
- LeetCode841 钥匙和房间
有 N 个房间,开始时你位于 0 号房间.每个房间有不同的号码:0,1,2,...,N-1,并且房间里可能有一些钥匙能使你进入下一个房间. 在形式上,对于每个房间 i 都有一个钥匙列表 rooms[i ...
- Centos 7 下的KVM虚拟机
一 什么是KVM虚拟机: KVM虚拟机 Kernel-based Virtual Machine的简称,是一个开源的系统虚拟化模块,自Linux 2.6.20之后集成在Linux的各个主要发行版本中. ...
- Chrome Performance性能分析面板使用
最近做的项目都是内嵌egret游戏,想在移动端监测下它的性能,于是就开始了对Performance的探索: 一.使用 打开控制台,一顿操作: 网络选择Fast 3G,模拟手机普通3G环境,虽然现在大家 ...
- 微信小程序腾讯地图SDK使用方法
一.本篇文章主要知识点有以下几种: 1.授权当前位置 2.map组件的使用 3.腾讯地图逆地址解析 4.坐标系的转化 二.效果如下: 三.WXML代码 <map id="map&quo ...