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 相关文章推荐
Ruffy javascript 学习笔记
Nov 30 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 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
一台收音机,让一家人都笑逐颜开!
2020/08/21 无线电
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
在Python中实现贪婪排名算法的教程
2015/04/17 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
python实现各进制转换的总结大全
2017/06/18 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
C++的几个面试题附答案
2016/08/03 面试题
网络编辑岗位职责
2014/03/18 职场文书
美术专业自荐信
2014/07/07 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
Python装饰器详细介绍
2022/03/25 Python
Python字符串格式化方式
2022/04/07 Python
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL