WordPress联系表单：添加数字掩码与最小位数验证及按钮禁用问题

步骤1：给表单字段添加专属类 #

在Contact Form7的表单编辑器中，给姓名和电话字段分别添加类名，方便jQuery定位：

• 姓名字段示例：[text* your-name class:name-field]
• 电话字段示例：[tel* your-phone class:phone-field]

步骤2：修改jQuery代码整合掩码与验证逻辑 #

替换原有代码为以下内容，包含数字掩码、长度验证和提交按钮控制：

jQuery(document).ready(function($){
    // 初始化禁用提交按钮
    $('.wpcf7-form').each(function () {
        $(this).find('input[type=submit]').prop('disabled', true);
    });

    // 电话字段数字掩码：只允许输入数字
    $(document).on('keydown', '.phone-field', function (e) {
        // 允许退格、删除、箭头键和Tab键
        const allowedKeys = [8, 46, 37, 38, 39, 40, 9];
        if (!allowedKeys.includes(e.keyCode) && (e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });

    // 实时验证表单并控制提交按钮状态
    $(document).on('keyup change', '.wpcf7-form input', function () {
        let form = $(this).parents('.wpcf7-form');
        let err = 0;
        
        // 遍历所有必填字段（排除提交按钮）
        $(form).find('.wpcf7-form-control').not('input[type=submit]').each(function () {
            const fieldVal = $(this).val().trim();
            
            // 空值验证
            if (fieldVal === '') {
                err++;
                return;
            }

            // 姓名字段：最小长度验证（至少2个字符）
            if ($(this).hasClass('name-field') && fieldVal.length < 2) {
                err++;
            }

            // 电话字段：最小长度验证（至少11位数字）
            if ($(this).hasClass('phone-field') && fieldVal.length < 11) {
                err++;
            }
        });

        // 根据错误数控制提交按钮状态
        $(form).find('input[type=submit]').prop('disabled', err > 0);
    });
});

代码说明 #

• 数字掩码：通过keydown事件拦截非数字输入，同时保留必要的控制键（退格、箭头等），确保电话字段只能输入数字。
• 姓名验证：检查姓名字段值长度是否≥2，不足则计入错误。
• 电话验证：检查电话字段值长度是否≥11（可根据需求调整位数），不足则计入错误。
• 提交按钮控制：整合所有验证规则，只要有一项不满足，就禁用提交按钮；全部通过则启用。

内容的提问来源于stack exchange，提问作者Никита Кабанов