在 WordPress 插件开发中使用 javascript 验证

Posted 2023-05-09

【中文标题】在 WordPress 插件开发中使用 javascript 验证

【英文标题】：Using javascript validation in WordPress plugin development

【发布时间】：2016-11-17 04:02:45

【问题描述】：

开始在 WordPress 中开发自定义数据库表格插件。

当我开始在我的插件中使用 jquery 时，我已经开始收到通知错误，例如：

wp_enqueue_script 调用不正确。

我需要一些关于如何在 WordPress 插件中调用 jQuery / js 的帮助。

这是我的验证码：

<script>
    var jq = $.noConflict();
    jq(document).ready(function()
        jq('#submit').click( function() 

            //check whether browser fully supports all File API
            if (window.File && window.FileReader && window.FileList && window.Blob)
            

                //get the file size and file type from file input field
                var fsize = jq('#File_Upload')[0].files[0].size;

                if(fsize>5000000) //do something if file size more than 1 mb (1048576)
                
                    //alert ("Only the file less than 5 mb  allowed to upload");
                    //alert ('<?php echo "Only the file less than 5 mb  allowed to upload";?>');
                    jq('.file-upload-error').show(0).delay(10000).hide(0);
                    return false;
                
                else
                
                    return true;
                
            
        );
    );
</script>

以上代码用于上传验证。

谢谢

【参考方案1】：

首先我对你的 javascript/jQuery 代码做了一点改动：

jQuery(document).ready(function($)

    console.log("plugin script loaded");
    $('#submit').click( function() 

        //check whether browser fully supports all File API
        if (window.File && window.FileReader && window.FileList && window.Blob)
        

            //get the file size and file type from file input field
            var fsize = $('#File_Upload')[0].files[0].size;

            if(fsize>5000000) //do something if file size more than 1 mb (1048576)
            
                console.log("Only the file less than 5 mb  allowed to upload");
                $('.file-upload-error').show(0).delay(10000).hide(0);;
                return false;
            
            else
            
                console.log("file is less than 5 mb allowed to upload");
                return true;
            
        
    );
);

这是为插件排队 javascript 文件的正确方法：

add_action( 'wp_enqueue_scripts', 'custom_table_example_validation' );
function custom_table_example_validation() 
    wp_register_script( 'est_collaboration', plugins_url('/js/upload_valid.js', __FILE__), array('jquery'));
    wp_enqueue_script( 'jquery' );

这应该可以工作

【讨论】：

检查codex.wordpress.org/Function_Reference/plugins_url 站点的plugins_url()。

@Loic 不，它不起作用；我也尝试过传递绝对路径...仍然没有调用 js 文件。