JQuery插件不适用于codepen,在其他地方也很好

JQuery plugin not working on codepen, works great elsewhere

本文关键字:其他 很好 插件 不适用 适用于 codepen JQuery      更新时间:2023-09-26

我刚刚写了一个插件,到目前为止,它的性能正是我在开发时所希望的。我试图将此代码从我的脚本目录中取出,并将其发布在Codepen.io上。在那里运行时,我遇到了一个脚本错误,错误是无法读取未定义的"Action"。它由传递事件的点击事件实例化。两者都使用jQuery 2.1。有人知道这里发生了什么吗?

这是代码笔:

http://codepen.io/nicholasabrams/pen/uJKrL

// $ DOC
$.fn.dataValidate = function(event, userSettings) {
    "use strict";
    event.preventDefault();
    var api = {
        // Script definition defaults defined in object below
        notNull: {
            errorText: 'This field is required',
            symbol: false,
            Action: function(dataToCheck, instance) {
                if (dataToCheck === '' || dataToCheck === null || dataToCheck === 'undefined' || dataToCheck.length === 0 ) {
                    // if true return true to caller
                    alert('null');
                    // Retrieve errorText
                    // Wrap in error template
                    this.errorForNotNull = new api.ErrorInjector(instance);
                    return false;
                } 
                else {
                    return true;
                }
            }
        },
        isNaN: {
            errorText: 'Numbers not allowed here',
            symbol: false,
            Action: function(dataToCheck, instance) {
                  api.notNull.Action(dataToCheck, instance); /* Reuse the notNull method as a screening service before entering into the method specific filtering (assuming null fields would be inappropriate in any types of check) */
                  if (isNaN(dataToCheck)){ // Check if the not null field is also non a number
                                    return true;
                    }
                  else {
                    this.errorForIsNan = new api.ErrorInjector(instance);
                    return false;
                  }
              }
        },
        isNum: {
            errorText: 'Please enter a number',
            symbol: false,
            Action: function(dataToCheck, instance) {
                 api.notNull.Action(dataToCheck, instance);
                  if (!isNaN(dataToCheck)){ // Check if the not null field is also non a number
                                    return true;
                    }
                  else {
                    this.errorForIsNan = new api.ErrorInjector(instance);
                    return false;
                  }
            }
        },
        isEmail: {
            errorText: 'Please enter a valid email address',
            symbol: false,
            Action: function(dataToCheck, instance) {
              api.notNull.Action(dataToCheck, instance);
              var checkEmailRegEx = /^(([^<>()[']''.,;:'s@'"]+('.[^<>()[']''.,;:'s@'"]+)*)|('".+'"))@(('[[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'])|(([a-zA-Z'-0-9]+'.)+[a-zA-Z]{2,}))$/;  
              if (checkEmailRegEx.test(dataToCheck)){
              }
              else {
                this.errorForIsEmail = new api.ErrorInjector(instance);
              }
            }
        },
        isPw: {
            errorText: 'Please enter a password',
            symbol: false,
            Action: function(dataToCheck, instance) {
                api.notNull.Action(dataToCheck, instance);  
                console.log(dataToCheck);
                if (dataToCheck.length > 4){
                  var isPwRegEx = /^(?=.*'d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/;
                    if(isPwRegEx.test(dataToCheck)){
                      // Multiple pw checkpoints here
                      // At least one upper case English letter
                      // At least one lower case English letter
                      // At least one digit
                      // At least one special character
                      return false;
                    }
                    else {  
                      this.errorForIsPw = new api.ErrorInjector(instance);  
                      return true;
                    }
                  }
              } // End length check for isPw

        },
        isPhoneNumber: {
            errorText: 'Please enter a valid phone number',
            symbol: false,
            Action: function(dataToCheck, instance) {
                api.notNull.Action(dataToCheck, instance);
                this.errorForIsPhoneNumber = new api.ErrorInjector(instance);
            }
        },
        isUsername: {
            errorText: 'Please enter a valid username',
            symbol: false,
            Action: function(dataToCheck, instance) {
                api.notNull.Action(dataToCheck, instance);
              var checkUsernameRegEx = /^[a-zA-Z0-9.'-_$@*!]{3,30}$/;  
              if (checkUsernameRegEx.test(dataToCheck)){
                alert('valid username');
              }
              else {
                this.errorForIsEmail = new api.ErrorInjector(instance);
              }
            }
        },
         isNamePart: {
            errorText: 'Please enter a valid name',
            symbol: false,
            Action: function(dataToCheck, instance) {
                api.notNull.Action(dataToCheck, instance);
              var checkNamePartRegEx = /^[a-zA-Z ]+$/;  
              if (checkNamePartRegEx.test(dataToCheck)){
                alert('valid name part');
              }
              else {
                this.errorForIsEmail = new api.ErrorInjector(instance);
              }
            }
        },
        // New method would be added here
        errorOutput: 'validated',
        targets: ['[data-validate="notNull"]', '[data-validate="isNaN"]',
            '[data-validate="isNum"]', '[data-validate="isEmail"]', '[data-validate="isPw"]', '[data-validate="isPhoneNumber"]', '[data-validate="isUsername"]','[data-validate="isNamePart"]'],
        // Target selectors, can be modified on initialization to that of your liking, as well as have new ones added. Add a new selector target at the end of the array above
        placeholder: {
            // Template shared by each validation output error
            template: {
                defaultPlaceholderContainerStyle: 'position: relative;background:#ccc;',
                defaultPlaceholderStyle: 'position: absolute;left:0;top:0;width:100%;line-height:26px;height:100%;',
                // The above styles may be easily detached by simply tranfering the above CSS to a style rule matching the errorOutput class outlined above in this same object, or set on instantiation
            },
        },
        ErrorInjector: function(instance) {
            var errorNs = instance.data('validate');
            var error = '<div data-validate="output" class="' + api.errorOutput + '">' + api[errorNs].errorText + '<'/div>';
            instance.wrap('<div data-validate="output_container" class="' + api.errorOutput + '_container"><'/div>');
            instance.before(error);
        },
        acceptedTypes : ['input[type="text"]','input[type="email"]','input[type="password"]','input[type="checkbox"]','input[type="radio"]','input[type="tel"]'],
        results: {} // NS for all validation results and debugging info (see below)
    };
    // Merge the caller sent options object with the defaults. Any options set in on init from the caller will overwrite the default/internal settings
    this._overrideApiWithUserSettings = (function() {
        $.extend(true, api, userSettings);
    })();
    var targetsAll = api.targets;
    // Private utility for removing the validationOutput errors from the DOM
    this._removeThisErrorFocusThisInput = function() {
       var activeOutputPlaceholder = $(this);
       activeOutputPlaceholder.unwrap();
       activeOutputPlaceholder.remove();
       $.each(api.acceptedTypes, function(){
        var eachTypeInAcceptedTypes = this;
          activeOutputPlaceholder.find(eachTypeInAcceptedTypes).focus();
       });
       $('body').unbind('click', '.' + api.errorOutput);
    };
    $('body').on('click', '.' + api.errorOutput, this._removeThisErrorFocusThisInput);
    // Fire each module off conditionally, based on the presence of the targets set on init
    this._instantiateByDataValues = (function() { // The core of the script, carefully loadings only each modular bit of functionality by its request in the DOM via data-validate=""
        $.each(targetsAll, function( /*iteration*/ ) { /* Iterate through all of the selectors in the targets array, doing the following with each instance of them found in the DOM, passing iteration for debugging purposed only */
            var selectorTargetFromArray = $(this);
            $.each(selectorTargetFromArray, function() {
                var instance = $(this),
                    thisFnFromDomDataAttrNS = instance.data('validate');
                if (instance.length) { // If any of the selectors in the targets array are found to be in the the DOM on init
                    // Fire the constructor on the element with the data-validate="thisMethod", while passing its value to its action (all method modules and method specific functionality is named based on the selector that is responsible for its instantiation)
                    this.executeActionByCallerName = new api[thisFnFromDomDataAttrNS].Action(instance.val(), instance);
                    //! This fires off the action of the module itself off by the name of the value in the data-validate="functionNameHere"    
                } 
                else {
                    this._createNoRunLog = api.results[this] = false; // Store refs to any built in methods not used for your debugging pleasure, under the name it is called by and on
                    console.log(api.results);
                }
            });
        });
    })();
    return this;
}; // End preValidation module

在JSFiddle上运行良好。。http://jsfiddle.net/exsfabxr/我想我可以排除我的代码是这里的问题吗?这似乎是Codepen.io内部的问题?

$(function(){ alert('same code as above, i just wrote this because of stackoverflows "smart" validation'); window.location.href = 'http://jsfiddle.net/exsfabxr/'; });
相关文章: