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 相关文章推荐
jquery实现的超出屏幕时把固定层变为定位层的代码
Feb 23 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
jquery中的过滤操作详细解析
Dec 02 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
JS实现的几个常用算法
Nov 12 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
AngularJS表单验证功能
Oct 19 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
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
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
高性能PHP框架Symfony2经典入门教程
2014/07/08 PHP
js 走马灯简单实例
2013/11/21 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
Element Notification通知的实现示例
2020/07/27 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
Python3读取文件常用方法实例分析
2015/05/22 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
python实现kmp算法的实例代码
2019/04/03 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
python爬虫可以爬什么
2020/06/16 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
Django xadmin安装及使用详解
2020/10/26 Python
python绘图模块之利用turtle画图
2021/02/12 Python
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
元旦联欢会主持词
2014/03/26 职场文书
合作经营协议书范本
2014/04/17 职场文书
公司承诺书范文
2014/05/19 职场文书
学校欢迎标语
2014/06/18 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
2016年端午节寄语
2015/12/04 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python