如何为meio mask编写0-100整数百分比输入掩码规则？

你的原有代码无法正常工作，原因是Meio Mask的规则是针对单个字符的正则匹配，你定义的/0|[1-9][0-9]?|100/是匹配整个数值的多字符正则，不符合框架的规则逻辑——每个掩码占位符（比如你用的%）只能对应单个字符的验证规则。

下面是两种可行的实现方案：

方案一：基于位置的精准字符验证 #

通过自定义掩码规则，针对输入的每一位字符做条件判断，确保输入过程中不会超出0-100的范围：

// 注册百分比掩码
$.mask.masks.percentage = {
    mask: '999',
    rules: {
        '9': function(e, buffer, caretPos) {
            // 提取当前已输入的数字内容
            const currentValue = buffer.join('').replace(/[^0-9]/g, '');
            const inputChar = e.key;

            // 非数字直接拒绝
            if (!/\d/.test(inputChar)) return false;

            // 根据光标位置判断允许的字符
            if (caretPos === 0) {
                // 第一位只能是0或1
                return /[01]/.test(inputChar);
            } else if (caretPos === 1) {
                // 第一位是1时，第二位只能是0；否则第二位可以是0-9
                return currentValue[0] === '1' ? inputChar === '0' : /[0-9]/.test(inputChar);
            } else if (caretPos === 2) {
                // 前两位是10时，第三位只能是0；否则组合后数值不能超过100
                const tempVal = currentValue.substring(0, 2) + inputChar;
                return currentValue.substring(0, 2) === '10' ? inputChar === '0' : parseInt(tempVal) <= 100;
            }
            return false;
        }
    },
    // 输入完成后修正数值（比如把101转为100，空值转为0）
    onKeyUp: function(e, $input) {
        const rawVal = $input.val().replace(/[^0-9]/g, '');
        const num = parseInt(rawVal) || 0;
        const validNum = Math.max(0, Math.min(100, num));
        $input.val(validNum.toString());
    }
};

// 给输入框应用掩码
$('input.your-percentage-input').mask('percentage');

方案二：动态数值范围验证 #

简化规则逻辑，直接验证输入后的整体数值是否在0-100之间，同时支持1-3位的动态输入长度：

// 定义通用的百分比数字验证规则
$.mask.rules.percentDigit = function(e, buffer, caretPos) {
    const currentDigits = buffer.join('').replace(/\D/g, '');
    const inputChar = e.key;

    if (!/\d/.test(inputChar)) return false;

    // 模拟输入当前字符后的完整数值
    const tempVal = currentDigits.substring(0, caretPos) + inputChar + currentDigits.substring(caretPos);
    const num = parseInt(tempVal) || 0;

    // 验证数值是否在0-100范围内
    return num >= 0 && num <= 100;
};

// 注册动态长度的百分比掩码
$.mask.masks.percentage = {
    mask: '9?9?9', // 允许1-3位数字
    rules: {
        '9': 'percentDigit'
    },
    onKeyUp: function(e, $input) {
        const rawVal = $input.val().replace(/[^0-9]/g, '');
        const num = parseInt(rawVal) || 0;
        const validNum = Math.max(0, Math.min(100, num));
        $input.val(validNum.toString());
    }
};

// 应用掩码
$('input.your-percentage-input').mask('percentage');

两种方案都能实现需求，方案一更注重输入过程中的实时限制，方案二更简洁灵活。

内容的提问来源于stack exchange，提问作者Matías Cánepa