如何在WordPress后台用jQuery验证输入字符串是否为有效数字

问题分析 #

你的代码存在两个核心问题：

1. 选中了所有INPUT元素，会干扰后台其他输入框（如标题、标签）的正常交互
2. 数字验证逻辑未正确触发，原生validity.valid仅检查必填规则，无法覆盖自定义数字格式验证

修正后的代码方案 #

先精准定位价格输入框（比如通过类名price-input或字段name属性），再添加实时验证和提交拦截：

jQuery(document).ready(function($){
    // 替换成你的价格输入框选择器：比如按name属性 $('input[name="your_price_field"]')
    const priceInput = $('input.price-input');

    // 实时验证输入内容
    priceInput.on('input change', function() {
        const inputEl = this;
        const rawValue = inputEl.value.trim();
        let errorMsg = '';

        // 空值验证
        if (!rawValue) {
            errorMsg = '请填写价格';
        } 
        // 有效价格验证：支持整数、最多两位小数，可选千分位逗号
        else if (!/^\d+(\.\d{1,2})?$/.test(rawValue.replace(/,/g, ''))) {
            errorMsg = '请输入有效的价格，例如：280、364、1234.56';
        }

        // 设置自定义验证提示
        inputEl.setCustomValidity(errorMsg);
    });

    // 提交表单时强制触发验证
    $('#post').on('submit', function() {
        priceInput.trigger('change');
        // 验证不通过则阻止提交
        return priceInput.get(0).checkValidity();
    });
});

关键修改说明 #

• 精准选择输入框：避免影响后台其他字段，必须指定价格输入框的专属选择器（比如给字段加类名price-input）
• 实时反馈：在用户输入/修改时立即验证，而非仅在提交时提示
• 可靠的正则验证：
  • replace(/,/g, '')先移除千分位逗号，统一验证数字格式
  • /^\d+(\.\d{1,2})?$/匹配符合价格规则的内容：正整数或最多两位小数的正数
• 表单提交拦截：提交前强制触发验证，确保无效内容无法提交

如何在WordPress后台加载脚本 #

在主题的functions.php中添加以下代码，仅在文章编辑/添加页面加载验证脚本：

add_action('admin_enqueue_scripts', function($hook) {
    // 仅在文章编辑页和新建页加载
    if ($hook !== 'post.php' && $hook !== 'post-new.php') {
        return;
    }
    // 替换为你的JS文件路径
    wp_enqueue_script(
        'price-validation',
        get_stylesheet_directory_uri() . '/js/price-validation.js',
        array('jquery'),
        '1.0',
        true
    );
});

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