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 相关文章推荐
Document对象内容集合(比较全)
Sep 06 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
推荐25个超炫的jQuery网格插件
Nov 28 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
使用 vue.js 构建大型单页应用
Feb 10 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 Javascript
解决vue项目router切换太慢问题
Jul 19 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 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
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
JavaScript学习笔记之JS对象
2015/01/22 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
javascript创建cookie、读取cookie
2016/03/31 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
vue.js实现标签页切换效果
2018/06/07 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
python实现代理服务功能实例
2013/11/15 Python
python采用getopt解析命令行输入参数实例
2014/09/30 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
pandas分组聚合详解
2020/04/10 Python
诚信考试标语
2014/06/24 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
项目备案申请报告
2015/05/15 职场文书
个人借条范本
2015/05/25 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
Python 多线程之threading 模块的使用
2021/04/14 Python
使用numpy nonzero 找出非0元素
2021/05/14 Python
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP