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分页
Jun 07 Javascript
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
详解vue中this.$emit()的返回值是什么
Apr 07 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
Aug 09 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+ajax 无刷新删除数据
2010/02/20 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
javascript实现数独解法
2015/03/14 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
全面分析Python的优点和缺点
2018/02/07 Python
python生成带有表格的图片实例
2019/02/03 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
Yahoo的PHP面试题
2014/05/26 面试题
先进个人事迹材料
2014/01/25 职场文书
申论倡议书范文
2014/05/13 职场文书
环保标语大全
2014/06/12 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
好的促销活动方案
2014/08/21 职场文书
副总经理岗位职责
2015/02/02 职场文书
求职自我评价范文
2015/03/09 职场文书
2015年底工作总结范文
2015/05/15 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
Java中的随机数Random
2022/03/17 Java/Android