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

 更新时间:2015年11月06日 11:48:14   投稿:lijiao  
这篇文章为大家介绍了一款jQuery验证码插件Real Person,可以防止自动提交表单

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

效果图如下:


使用说明
需要使用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的使用方法,小编整理的可能有些不全面,希望大家多多谅解。

相关文章

  • jquery定时滑出可最小化的底部提示层特效代码

    jquery定时滑出可最小化的底部提示层特效代码

    当打开页面或者刷新页面后等待两秒钟,会在底部滑出可最小化的提示层。滑出层半透明,可关闭再现。应用范围很广,比如弹出广告、弹出注册层、弹出最新消息等,实现的jquery代码比较简单
    2013-10-10
  • jQuery自定义添加

    jQuery自定义添加"$"与解决"$"冲突的方法

    这篇文章主要介绍了jQuery自定义添加"$"与解决"$"冲突的方法,介绍了用户自定义添加“$”扩展jQuery功能的方法,以及解决"$"冲突的技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery常用数据处理方法小结

    jQuery常用数据处理方法小结

    这篇文章主要介绍了jQuery常用数据处理方法,实例总结了trim、param、isArray、isFunction、each等jQuery常用的数据处理方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • Jquery选择子控件"大于号"和" "区别介绍及使用示例

    Jquery选择子控件"大于号"和" "区别介绍及使用示例

    Jquery选择子控件”>“:在给定的父元素下匹配所有的子元素;另一个就是在给定的祖先元素下匹配所有的后代元素,具体概述及使用示例如下,感兴趣的朋友可以参考下哈
    2013-06-06
  • 同域jQuery(跨)iframe操作DOM(示例代码)

    同域jQuery(跨)iframe操作DOM(示例代码)

    这篇文章主要是对同域jQuery(跨)iframe操作DOM的示例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • jquery仿京东侧边栏导航效果

    jquery仿京东侧边栏导航效果

    这篇文章主要为大家详细介绍了jquery仿京东侧边栏导航效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 基于jquery 的一个progressbar widge

    基于jquery 的一个progressbar widge

    这个widget是包含在wijmo 项目中的一个widget。目前此widget已经开源基于mit和gpl双协议,目前是beta版,可能存在bug。
    2010-10-10
  • jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】

    jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】

    这篇文章主要介绍了jQuery插件HighCharts实现的2D对数饼图效果,结合实例形式分析了jQuery图形插件HighCharts绘制2D对数饼图的具体实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2017-03-03
  • jQuery插件windowScroll实现单屏滚动特效

    jQuery插件windowScroll实现单屏滚动特效

    本文给大家分享的是一个使用jQuery插件windowScroll实现的单屏滚动的特效,主要参考搜狗浏览器4.2版本首页的上下滚动效果。主要实现整个窗口的上下和左右滚动逻辑,非常的实用。
    2015-07-07
  • jQuery 事件的命名空间简单了解

    jQuery 事件的命名空间简单了解

    用 jQuery 绑定和解绑事件监听器都是非常简单的,怎样精确地解绑其中一个监听器?我们需要了解一下事件的命名空间,感兴趣的朋友不要错过
    2013-11-11

最新评论