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网页版计算器的简单实现
Jul 02 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
Vuex 进阶之模块化组织详解
Jan 12 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 Javascript
openLayer4实现动态改变标注图标
Aug 17 Javascript
JavaScript实现五子棋小游戏
Oct 26 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
如何使用脚本模仿登陆过程
2006/11/22 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
Yii rules常用规则示例
2016/03/15 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
Javascript 作用域使用说明
2009/08/13 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
2013年入党人员的自我鉴定
2013/10/25 职场文书
报到证丢失证明
2014/01/11 职场文书
学期自我评价
2014/01/27 职场文书
绿色环保标语
2014/06/12 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
群众路线教育实践活动整改方案(个人版)
2014/10/25 职场文书
组织委员竞选稿
2015/11/21 职场文书
mysql知识点整理
2021/04/05 MySQL
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL
MySQL创建高性能索引的全步骤
2021/05/02 MySQL
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS