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 相关文章推荐
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
javascript实现简易计算器
Feb 01 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
May 02 Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 Javascript
vuejs实现下拉框菜单选择
Oct 23 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
Email+URL的判断和自动转换函数
2006/10/09 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
推荐11个实用Python库
2015/01/23 Python
python 多线程实现检测服务器在线情况
2015/11/25 Python
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
pycharm运行scrapy过程图解
2019/11/22 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
Optimalprint加拿大:在线打印服务
2020/04/03 全球购物
简历中求职的个人自我评价
2013/12/03 职场文书
疾病捐款倡议书
2014/05/13 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
公司表扬稿范文
2015/05/05 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS
微信小程序基础教程之echart的使用
2021/06/01 Javascript
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL