jQuery Real Person验证码插件防止表单自动提交

本文介绍的jQuery插件有点特殊，防自动提交表单的验证工具，就是我们经常用到的验证码工具，先给大家看看效果。

效果图如下：

使用说明
需要使用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的使用方法，小编整理的可能有些不全面，希望大家多多谅解。

赞 (0)

相关推荐

  • jquery+ajax验证不通过也提交表单问题处理

    validationEngine给我们为前端的表单验证减少了很大的工作量.大部分情况我们使用validationEngine验证表单的形式有几种方式: 1 使用正常的表单提交.这种情况validationEngine验证不通过是不会提交表单的. 2 使用ajax提交表单,但是没有使用ajax验证. 这种方式也比较简单,在我们使用ajax请求前检查验证是否通过就可以,例如: 复制代码 代码如下: //验证不通过时return      if(!$("form#ajaxForm").val

  • jquery validate和jquery form 插件组合实现验证表单后AJAX提交

    要实现表单验证和无刷新提交表单我们可以使用jQuery的两个很好用的插件--jquery validate.js 和 jquery form.js.具体详细说明情况下文. 1.jQuery validate.js,它说白了就是一个很高尚的人为我们写好了各种表单的验证,不用我们这些童鞋去现写了,一天天的多累啊,呵呵. 2.jQuery form.js,"这个插件能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单. 插件里面主要的方法, ajaxForm 和 ajaxSubmi

  • Jquery表单验证失败后不提交的解决方法

    前言 这个问题经过我的整理发现是对事件的认识和js的结构没有了解清楚,return的false在onclick事件中没有返回,所以onclick之后只是显示了false值. 解决方法示例 就是一个普通的表单验证提交: <input type="botton" </code><code>onclick="javascript:checkUserInfo()"</code><code>/> checkUserI

  • Jquery插件easyUi表单验证提交(示例代码)

    复制代码 代码如下: <form id="myForm" method="post">  <table align="center" style="width:400px;height:auto;margin-top: 20px">           <tr>                                           <td align="righ

  • Jquery练习之表单验证实现代码

    Jquery练习表单验证 复制代码 代码如下: <body> <form action="" method="post" id ="myform"> <table> <tr> <td>姓名:</td> <td><input type ="text" id = "name" name ="name"&

  • jQuery中验证表单提交方式及序列化表单内容的实现

    之前项目中使用的表单提交方式 使用form()方法可以将提交事件脱离submit按钮,绑定到任何事件中 复制代码 代码如下: function addSubmit(){ $('#addForm').form('submit', { url : _basePath + '/@Controller/@RequestMapping', onSubmit : function() { if(boolean){//放置能否提交的判断条件 $.messager.show({ title:'提示',msg:'

  • jQuery form插件之formDdata参数校验表单及验证后提交

    Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.引入依赖js <script src="jquery-1.3.1.js" type="text/javascript"></script> <script src="jquery.form.js" type="text/javascript"&g

  • 基于jQuery实现表单提交验证

    html表单代码: 复制代码 代码如下: <form method="post" action="">        <div class="int">           <label for="username">用户名:</label>           <input type="text" id="username" cla

  • jQuery EasyUI提交表单验证

    jQuery EasyUI提交表单验证

    EasyUI的form表单里面的验证框,先讲解下validatebox类和相关的属性. 验证规则 验证规则是通过使用 required 和 validType 特性来定义的, 这里是已经实施的规则: email:匹配 email 正则表达式规则,系统提供的属性. url:匹配 URL 正则表达式规则 length[0,100]:允许从 x 到 y 个字符 remote['http://.../action.do','paramName']:发送 ajax 请求来验证值,成功时返回 'true'

  • jquery实现表单验证并阻止非法提交

    代码检测textarea内填写的长度,未填写时提示需要重新填写,少于15字符时提示需要长于15字符,成功时显示所填写建议. <script type="text/javascript"> //jQuery代码 function confirm() { if($("#advice").val().length == 0) { alert("We can't see your advice. Maybe you should fill the fo

随机推荐