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 相关文章推荐
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
用jquery统计子菜单的条数示例代码
Oct 18 Javascript
js 处理数组重复元素示例代码
Dec 27 Javascript
Jquery树插件zTree用法入门教程
Feb 17 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
小程序云开发如何实现图片上传及发表文字
May 17 Javascript
详解JavaScript 作用域
Jul 14 Javascript
js数组中去除重复值的几种方法
Aug 03 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
中东人咖啡哲学
2021/03/03 咖啡文化
php 调试利器debug_print_backtrace()
2012/07/23 PHP
php阳历转农历优化版
2016/08/08 PHP
PHP foreach遍历多维数组实现方式
2016/11/16 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
javascript实现当前页导航激活的方法
2015/02/27 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
vue中appear的用法
2017/08/17 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
Java面试笔试题大全
2016/11/23 面试题
财务人员个人求职信范文
2013/12/04 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
社区健康教育工作方案
2014/06/03 职场文书
优秀毕业生求职信
2014/06/05 职场文书
会计专业自荐书
2014/07/08 职场文书
企业法人代表证明书
2014/09/27 职场文书
公务员考察材料范文
2014/12/23 职场文书
水电工程师岗位职责
2015/02/13 职场文书
开业庆典致辞
2015/08/01 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
解读Vue组件注册方式
2021/05/15 Vue.js
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL