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 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
Aug 06 Javascript
浅析javascript 定时器
Dec 23 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
vue实现分页加载效果
Dec 24 Javascript
vue 数据双向绑定的实现方法
Mar 04 Vue.js
node中使用shell脚本的方法步骤
Mar 23 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中include()与require()的区别说明
2010/03/10 PHP
PHP 数据结构 算法 三元组 Triplet
2011/07/02 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
AJAX架构之Dojo篇
2007/04/10 Javascript
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
python 正则式使用心得
2009/05/07 Python
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
使用Python实现简单的服务器功能
2017/08/25 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
用python制作个音乐下载器
2021/01/30 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
测量实习生自我鉴定
2013/09/19 职场文书
《两个铁球同时着地》教学反思
2014/02/13 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
教育实习指导教师评语
2014/12/31 职场文书
理想国读书笔记
2015/06/25 职场文书
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android
Python socket如何解析HTTP请求内容
2022/02/12 Python
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang