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 13 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
学习jQuey中的return false
Dec 18 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
Sea.JS知识总结
May 05 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
webpack4.x打包过程详解
Jul 18 Javascript
实例讲解vue源码架构
Jan 24 Javascript
js实现百度淘宝搜索功能
Feb 17 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 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下对字符串的递增运算代码
2010/08/21 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
表单提交验证类
2006/07/14 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
Python 获得13位unix时间戳的方法
2017/10/20 Python
python+opencv识别图片中的圆形
2020/03/25 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
详解python中的hashlib模块的使用
2019/04/22 Python
python tkinter实现屏保程序
2019/07/30 Python
Python多线程获取返回值代码实例
2020/02/17 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
幼教个人求职信范文
2013/12/02 职场文书
前处理组长岗位职责
2014/03/01 职场文书
生活部的活动方案
2014/08/19 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
早安问候语大全
2015/11/10 职场文书
2016七夕情人节感言
2015/12/09 职场文书
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers