jQuery Real Person验证码插件防止表单自动提交


Posted in Javascript onNovember 06, 2015

本文介绍的jQuery插件有点特殊,防自动提交表单的验证工具,就是我们经常用到的验证码工具,先给大家看看效果。

效果图如下:

jQuery Real Person验证码插件防止表单自动提交

使用说明
需要使用jQuery库文件和Real Person库文件
同时需要自定义验证码显示的CSS样式

使用实例

1、包含文件部分
<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery.realperson.js"></script>
<style type="text/css">@import "jquery.realperson.css";</style>
2、HTML部分
<input type="text" id="biuuu" name="defaultReal">
3、Javascript部分
$("#biuuu").realperson();
如上实例,就可以实现一个防自动提交表单的验证码工具,同时可指定验证码字符的长度,如下:
$("#biuuu").realperson({length: 5});

今天所讲到的jQuery Real Person Plugin,就是一个完全由JavaScript编写而成的jQuery验证码插件。

jQuery插件Real Person 点击可刷新实例讲解

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.realperson.js"></script> 
<link href="jquery.realperson.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript"> 
  $(function(){ 
    $('#Gideon').realperson({length: 5}); 
  }) 
</script> 
</head> 
 
<body> 
 
<input type="text" id="Gideon" name="defaultReal"> 
</body> 
</html>

注:如果持续无法验证成功的话,请尝试下面的方法:

<?php 
function rpHash($value) { 
  $hash = 5381; 
  $value = strtoupper($value); 
  for($i = 0; $i < strlen($value); $i++) { 
    $hash = (($hash << 5) + $hash) + ord(substr($value, $i)); 
  } 
  return $hash; 
} 
?>

替换为:

<? 
  function rpHash($value)  
  { 
    $hash = 5381; 
    $value = strtoupper($value); 
    for($i = 0; $i < strlen($value); $i++) $hash = (leftShift32($hash, 5) + $hash) + ord(substr($value, $i)); 
    return $hash;  
  } 
 
  function leftShift32($number, $steps)  
  { 
    $binary = decbin($number); 
    $binary = str_pad($binary, 32, "0", STR_PAD_LEFT); 
    $binary = $binary.str_repeat("0", $steps); 
    $binary = substr($binary, strlen($binary) - 32); 
    return ($binary{0} == "0" ? bindec($binary) : -(pow(2, 31) - bindec(substr($binary, 1))));  
  } 
?>

以上就是为大家介绍了jQuery验证码插件Real Person的使用方法,小编整理的可能有些不全面,希望大家多多谅解。

Javascript 相关文章推荐
刷新时清空文本框内容的js代码
Apr 23 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
基于jQuery的实现简单的分页控件
Oct 10 Javascript
javascript中关于执行环境的杂谈
Aug 14 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
Layui table field初始化加载时进行隐藏的方法
Sep 19 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 Javascript
原生JS运动实现轮播图
Jan 02 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 #Javascript
javascript如何实现暂停功能
Nov 06 #Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 #Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 #Javascript
JS实现的自定义网页拖动类
Nov 06 #Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 #Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 #Javascript
You might like
一贴学会PHP 新手入门教程
2009/08/03 PHP
php获取后台Job管理的实现代码
2011/06/10 PHP
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
js 加载并解析XML字符串的代码
2009/12/13 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
JavaScript 数据类型详解
2017/03/13 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
nodejs中安装ghost出错的原因及解决方法
2017/10/23 NodeJs
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
python实现网站的模拟登录
2016/01/04 Python
python常用函数详解
2016/09/13 Python
python深度优先搜索和广度优先搜索
2018/02/07 Python
用python与文件进行交互的方法
2018/03/01 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
python numpy数组中的复制知识解析
2020/02/03 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
保护环境倡议书300字
2014/05/19 职场文书
班级文化建设标语
2014/06/23 职场文书
2014年绩效考核工作总结
2014/12/11 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书