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自己写tab滑动门(通用版)

    基于jquery自己写tab滑动门(通用版)

    今天与大家分享一下,自己写的滑动门。在网上也搜索了一下,没发现比较好的,于是乎自己写一吧~写起来也很简单,为了方便使用,我已经尽量封装好了。好吧,闲话少说,直接上代码吧
    2012-10-10
  • jquery统计复选框选中示例

    jquery统计复选框选中示例

    在jquery中如果我们要获取选中的checkbox我们可以input:checked,然后获取选中checkbox个数量时我们可以使用jQuery的size()方法或length属性来判断就行了
    2013-11-11
  • jQuery响应enter键的实现思路

    jQuery响应enter键的实现思路

    当用户在表单里数据完数据后,之间按enter键就可以执行查询或者保存的操作。实现的思路如下
    2014-04-04
  • jQuery实现锚点向下平滑滚动特效示例

    jQuery实现锚点向下平滑滚动特效示例

    下面小编就为大家带来一篇jQuery实现锚点向下平滑滚动特效示例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • jquery.validate.js 多个相同name的处理方式

    jquery.validate.js 多个相同name的处理方式

    本文通过代码给大家介绍了jquery.validate.js 多个相同name的处理方式,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-07-07
  • Jquery实现地铁线路指示灯提示牌效果的方法

    Jquery实现地铁线路指示灯提示牌效果的方法

    这篇文章主要介绍了Jquery实现地铁线路指示灯提示牌效果的方法,实例分析了jQuery动态显示特效的使用技巧,需要的朋友可以参考下
    2015-03-03
  • 50个比较实用jQuery代码段

    50个比较实用jQuery代码段

    本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助
    2011-09-09
  • uploadify多文件上传参数设置技巧

    uploadify多文件上传参数设置技巧

    uploadify插件配置实用比较简单,很多开发者都喜欢使用。但是它有个缺点就是刚加载的时候稍微慢了一秒左右,本文通过一段代码实例给大家介绍uploadify多文件上传参数设置技巧,朋友们一起学习吧
    2015-11-11
  • 浅析jQuery Ajax请求参数和返回数据的处理

    浅析jQuery Ajax请求参数和返回数据的处理

    这篇文章主要介绍了浅析jQuery Ajax请求参数和返回数据的处理的相关资料,需要的朋友可以参考下
    2016-02-02
  • jQuery获取URL请求参数的方法

    jQuery获取URL请求参数的方法

    这篇文章主要介绍了jQuery获取URL请求参数的方法,涉及jquery针对URL的获取与字符串的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07

最新评论