如何通过jQuery正确获取WordPress后台表单价格输入框的值

你的代码里存在两个关键错误，和子主题本身无关，修正后即可正常获取输入框值并完成验证：

错误点说明 #

• jQuery大小写错误：你在事件绑定和元素选择时用了小写的jquery，但jQuery的正确写法是大写开头的jQuery，或者利用document.ready回调里传入的$别名（这是jQuery推荐的写法，避免全局变量冲突）。
• 正则测试对象错误：document.getElementById('priceID')返回的是DOM元素对象，而正则的test()方法需要传入字符串类型的输入值，你应该直接获取元素的value属性，或者用jQuery的.val()方法拿到输入框的文本值。

修正后的jQuery代码 #

jQuery(document).ready(function($){
    // 使用回调传入的$作为jQuery别名，避免冲突
    $('#priceID').on("keyup", function(){
        // 直接通过$(this)获取当前输入框，调用.val()拿到输入值
        var priceStr = $(this).val();
        // 用字符串值做正则验证
        var valid = /^\d{0,4}(\.\d{0,2})?$/.test(priceStr);
        
        if(!valid && priceStr !== ""){
            console.log("Invalid input!");
            // 修正输入值，截取前length-1个字符
            $(this).val(priceStr.substring(0, priceStr.length - 1));
        }
    });
});

关于子主题的脚本加载说明 #

子主题本身不会导致jQuery无法获取元素的问题，但要确保脚本正确加载：
在子主题的functions.php中通过WordPress的脚本排队函数加载，确保依赖jQuery：

function enqueue_child_price_validation_script() {
    // 注册并加载自定义验证脚本，依赖jQuery
    wp_enqueue_script( 
        'custom-price-validation', 
        get_stylesheet_directory_uri() . '/js/price-validation.js', 
        array( 'jquery' ), 
        '1.0', 
        true 
    );
}
// 后台加载脚本，对应admin_enqueue_scripts钩子
add_action( 'admin_enqueue_scripts', 'enqueue_child_price_validation_script' );

（将修正后的jQuery代码保存到子主题的js/price-validation.js文件中，路径可根据实际情况调整）

内容的提问来源于stack exchange，提问作者daro2013