如何用jQuery Mask实现固定域名的无限长度邮箱输入掩码？

架构老林

2026-8-20

解决固定域名邮箱输入掩码的长度限制问题

问题根源

原配置存在两处错误：

掩码格式写成*{A}，搭配reverse: true会让掩码从右往左解析，直接限制了前缀只能输入单个字符。
自定义pattern里包含@完全多余，因为域名部分是固定的，用户根本不需要输入@。

修复方案

删掉reverse: true，恢复从左往右的正常解析逻辑。
把掩码简化为A@test.com.br，用A作为前缀的占位符。
调整A的匹配规则：只允许邮箱前缀的合法字符（字母、数字、下划线、减号、点号、加号），同时开启recursive: true实现任意长度输入。

修改后的完整代码

<div class="wrap-input100 validate-input" data-validate = "Digite seu usuário">
    <input class="email input100 <?php echo (!empty($user_erro)) ? 'is-invalid' : ''; ?>" type="text" name="usuario">
    <span class="focus-input100" data-placeholder="Email"></span>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
<script>
$(document).ready(function(){
    $('.email').mask('A@test.com.br', {
        'translation': { 
            "A": { 
                pattern: /[\w\-.+]/, 
                recursive: true 
            }
        }
    });
});
</script>