如何验证验证码?

时间:2014-05-09 05:43:08

标签: javascript ajax validation captcha recaptcha

你好下面是我的验证码代码,现在问题是当我在输入框中输入错误的验证码然后它正在接受时。任何人都告诉我如何验证何时输入错误的验证码?

表单代码:

<p class="Captcha" style="margin-top:5%; width: 100%;">
        <div style="margin:0 0 0 1%">
        <label class="captchalabel" style="width:38%; float: left;"><span style="margin:0 0 0 9%">Enter the text </span>  <span style="color:red">*</span>:</label>
        <input style=" float: left;" type="text" name="defaultReal" required>       </div>
        <div style="width: 20%; float: right;"  id="defaultReal">
        </div>
        </p>

javascript代码:

 var x=document.forms["custRegistration"]["defaultReal"].value;
    if (x==null || x=="")
      {
      alert("Pleae enter captcha code");
      return false;
      }

Js代码:

(function($) { // Hide scope, no $ conflict

/* Real person manager. */
function RealPerson() {
    this._defaults = {
        length: 6, // Number of characters to use
        includeNumbers: false, // True to use numbers as well as letters
        regenerate: '<div style="margin: -18% 1% 0 80%;"><img src="images/captcha.png"/></div>', // Instruction text to regenerate
        hashName: '{n}Hash' // Name of the hash value field to compare with,
            // use {n} to substitute with the original field name
    };
}

var CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
var DOTS = [
    ['   *   ', '  * *  ', '  * *  ', ' *   * ', ' ***** ', '*     *', '*     *'],
    ['****** ', '*     *', '*     *', '****** ', '*     *', '*     *', '****** '],
    [' ***** ', '*     *', '*      ', '*      ', '*      ', '*     *', ' ***** '],
    ['****** ', '*     *', '*     *', '*     *', '*     *', '*     *', '****** '],
    ['*******', '*      ', '*      ', '****   ', '*      ', '*      ', '*******'],
    ['*******', '*      ', '*      ', '****   ', '*      ', '*      ', '*      '],
    [' ***** ', '*     *', '*      ', '*      ', '*   ***', '*     *', ' ***** '],
    ['*     *', '*     *', '*     *', '*******', '*     *', '*     *', '*     *'],
    ['*******', '   *   ', '   *   ', '   *   ', '   *   ', '   *   ', '*******'],
    ['      *', '      *', '      *', '      *', '      *', '*     *', ' ***** '],
    ['*     *', '*   ** ', '* **   ', '**     ', '* **   ', '*   ** ', '*     *'],
    ['*      ', '*      ', '*      ', '*      ', '*      ', '*      ', '*******'],
    ['*     *', '**   **', '* * * *', '*  *  *', '*     *', '*     *', '*     *'],
    ['*     *', '**    *', '* *   *', '*  *  *', '*   * *', '*    **', '*     *'],
    [' ***** ', '*     *', '*     *', '*     *', '*     *', '*     *', ' ***** '],
    ['****** ', '*     *', '*     *', '****** ', '*      ', '*      ', '*      '],
    [' ***** ', '*     *', '*     *', '*     *', '*   * *', '*    * ', ' **** *'],
    ['****** ', '*     *', '*     *', '****** ', '*   *  ', '*    * ', '*     *'],
    [' ***** ', '*     *', '*      ', ' ***** ', '      *', '*     *', ' ***** '],
    ['*******', '   *   ', '   *   ', '   *   ', '   *   ', '   *   ', '   *   '],
    ['*     *', '*     *', '*     *', '*     *', '*     *', '*     *', ' ***** '],
    ['*     *', '*     *', ' *   * ', ' *   * ', '  * *  ', '  * *  ', '   *   '],
    ['*     *', '*     *', '*     *', '*  *  *', '* * * *', '**   **', '*     *'],
    ['*     *', ' *   * ', '  * *  ', '   *   ', '  * *  ', ' *   * ', '*     *'],
    ['*     *', ' *   * ', '  * *  ', '   *   ', '   *   ', '   *   ', '   *   '],
    ['*******', '     * ', '    *  ', '   *   ', '  *    ', ' *     ', '*******'],
    ['  ***  ', ' *   * ', '*   * *', '*  *  *', '* *   *', ' *   * ', '  ***  '],
    ['   *   ', '  **   ', ' * *   ', '   *   ', '   *   ', '   *   ', '*******'],
    [' ***** ', '*     *', '      *', '     * ', '   **  ', ' **    ', '*******'],
    [' ***** ', '*     *', '      *', '    ** ', '      *', '*     *', ' ***** '],
    ['    *  ', '   **  ', '  * *  ', ' *  *  ', '*******', '    *  ', '    *  '],
    ['*******', '*      ', '****** ', '      *', '      *', '*     *', ' ***** '],
    ['  **** ', ' *     ', '*      ', '****** ', '*     *', '*     *', ' ***** '],
    ['*******', '     * ', '    *  ', '   *   ', '  *    ', ' *     ', '*      '],
    [' ***** ', '*     *', '*     *', ' ***** ', '*     *', '*     *', ' ***** '],
    [' ***** ', '*     *', '*     *', ' ******', '      *', '     * ', ' ****  ']];

$.extend(RealPerson.prototype, {
    /* Class name added to elements to indicate already configured with real person. */
    markerClassName: 'hasRealPerson',
    /* Name of the data property for instance settings. */
    propertyName: 'realperson',

    /* Override the default settings for all real person instances.
       @param  options  (object) the new settings to use as defaults
       @return  (RealPerson) this object */
    setDefaults: function(options) {
        $.extend(this._defaults, options || {});
        return this;
    },

    /* Attach the real person functionality to an input field.
       @param  target   (element) the control to affect
       @param  options  (object) the custom options for this instance */
    _attachPlugin: function(target, options) {
        target = $(target);
        if (target.hasClass(this.markerClassName)) {
            return;
        }
        var inst = {options: $.extend({}, this._defaults)};
        target.addClass(this.markerClassName).data(this.propertyName, inst);
        this._optionPlugin(target, options);
    },

    /* Retrieve or reconfigure the settings for a control.
       @param  target   (element) the control to affect
       @param  options  (object) the new options for this instance or
                        (string) an individual property name
       @param  value    (any) the individual property value (omit if options
                        is an object or to retrieve the value of a setting)
       @return  (any) if retrieving a value */
    _optionPlugin: function(target, options, value) {
        target = $(target);
        var inst = target.data(this.propertyName);
        if (!options || (typeof options == 'string' && value == null)) { // Get option
            var name = options;
            options = (inst || {}).options;
            return (options && name ? options[name] : options);
        }

        if (!target.hasClass(this.markerClassName)) {
            return;
        }
        options = options || {};
        if (typeof options == 'string') {
            var name = options;
            options = {};
            options[name] = value;
        }
        $.extend(inst.options, options);
        target.prevAll('.' + this.propertyName + '-challenge,.' + this.propertyName + '-hash').
            remove().end().before(this._generateHTML(target, inst));
    },

    /* Generate the additional content for this control.
       @param  target  (jQuery) the input field
       @param  inst    (object) the current instance settings
       @return  (string) the additional content */
    _generateHTML: function(target, inst) {
        var text = '';
        for (var i = 0; i < inst.options.length; i++) {
            text += CHARS.charAt(Math.floor(Math.random() *
                (inst.options.includeNumbers ? 36 : 26)));
        }
        var html = '<div class="' + this.propertyName + '-challenge">' +
            '<div class="' + this.propertyName + '-text">';
        for (var i = 0; i < DOTS[0].length; i++) {
            for (var j = 0; j < text.length; j++) {
                html += DOTS[CHARS.indexOf(text.charAt(j))][i].replace(/ /g, '&nbsp;') +
                    '&nbsp;&nbsp;';
            }
            html += '<br>';
        }
        html += '</div><div class="' + this.propertyName + '-regen">' + inst.options.regenerate +
            '</div></div><input type="hidden" class="' + this.propertyName + '-hash" name="' +
            inst.options.hashName.replace(/\{n\}/, target.attr('name')) +
            '" value="' + this._hash(text) + '">';
        return html;
    },

    /* Enable the plugin functionality for a control.
       @param  target  (element) the control to affect */
    _enablePlugin: function(target) {
        target = $(target);
        if (!target.hasClass(this.markerClassName)) {
            return;
        }
        target.removeClass(this.propertyName + '-disabled').prop('disabled', false).
            prevAll('.' + this.propertyName + '-challenge').removeClass(this.propertyName + '-disabled');
    },

    /* Disable the plugin functionality for a control.
       @param  target  (element) the control to affect */
    _disablePlugin: function(target) {
        target = $(target);
        if (!target.hasClass(this.markerClassName)) {
            return;
        }
        target.addClass(this.propertyName + '-disabled').prop('disabled', true).
            prevAll('.' + this.propertyName + '-challenge').addClass(this.propertyName + '-disabled');
    },

    /* Remove the plugin functionality from a control.
       @param  target  (element) the control to affect */
    _destroyPlugin: function(target) {
        target = $(target);
        if (!target.hasClass(this.markerClassName)) {
            return;
        }
        target.removeClass(this.markerClassName).
            removeData(this.propertyName).
            prevAll('.' + this.propertyName + '-challenge,.' + this.propertyName + '-hash').remove();
    },

    /* Compute a hash value for the given text.
       @param  value  (string) the text to hash
       @return  the corresponding hash value */
    _hash: function(value) {
        var hash = 5381;
        for (var i = 0; i < value.length; i++) {
            hash = ((hash << 5) + hash) + value.charCodeAt(i);
        }
        return hash;
    }
});

// The list of commands that return values and don't permit chaining
var getters = [''];

/* Determine whether a command is a getter and doesn't permit chaining.
   @param  command    (string, optional) the command to run
   @param  otherArgs  ([], optional) any other arguments for the command
   @return  true if the command is a getter, false if not */
function isNotChained(command, otherArgs) {
    if (command == 'option' && (otherArgs.length == 0 ||
            (otherArgs.length == 1 && typeof otherArgs[0] == 'string'))) {
        return true;
    }
    return $.inArray(command, getters) > -1;
}

/* Attach the real person functionality to a jQuery selection.
   @param  options  (object) the new settings to use for these instances (optional) or
                    (string) the command to run (optional)
   @return  (jQuery) for chaining further calls or
            (any) getter value */
$.fn.realperson = function(options) {
    var otherArgs = Array.prototype.slice.call(arguments, 1);
    if (isNotChained(options, otherArgs)) {
        return plugin['_' + options + 'Plugin'].apply(plugin, [this[0]].concat(otherArgs));
    }
    return this.each(function() {
        if (typeof options == 'string') {
            if (!plugin['_' + options + 'Plugin']) {
                throw 'Unknown command: ' + options;
            }
            plugin['_' + options + 'Plugin'].apply(plugin, [this].concat(otherArgs));
        }
        else {
            plugin._attachPlugin(this, options || {});
        }
    });
};

/* Initialise the real person functionality. */
var plugin = $.realperson = new RealPerson(); // Singleton instance

$(document).on('click', 'div.' + plugin.propertyName + '-challenge', function() {
    if (!$(this).hasClass(plugin.propertyName + '-disabled')) {
        $(this).nextAll('.' + plugin.markerClassName).realperson('option', {});
    }
});

})(jQuery);

1 个答案:

答案 0 :(得分:0)

为了获得更好的体验,您可以使用google reCaptcha