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

Question

开始在 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>

以上代码用于上传验证。

谢谢

Answer 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' );
}

这应该可以工作