Xpages/JSF应用邮箱输入控件客户端域名限制及小写转换实现

针对你的需求，我们可以通过为xe:input控件绑定客户端onkeyup事件，同时实现域名自动转小写和即时格式验证提示功能，具体实现如下：

完整代码示例 #

<xe:inputText id="emailInput" value="#{document1.email}">
    <!-- 保留原有服务器端验证逻辑 -->
    <xp:this.validators>
        <xp:validateConstraint
            regex="${application.regex_email}"
            message="请遵循邮箱格式规则，仅允许acme.org或acme.com域名">
        </xp:validateConstraint>
        <xp:validateRequired
            message="邮箱不能为空">
        </xp:validateRequired>
    </xp:this.validators>
    
    <!-- 客户端onkeyup事件处理 -->
    <xp:eventHandler event="onkeyup" submit="false">
        <xp:this.script><![CDATA[
            var inputEl = this;
            var inputValue = inputEl.value.trim();
            
            // 1. 将@后的域名部分转为小写
            var atPosition = inputValue.indexOf('@');
            if (atPosition !== -1) {
                var localPart = inputValue.substring(0, atPosition);
                var domainPart = inputValue.substring(atPosition + 1).toLowerCase();
                inputEl.value = localPart + '@' + domainPart;
                // 更新验证用的数值
                inputValue = inputEl.value;
            }
            
            // 2. 即时验证并显示提示
            var emailRegex = /^([\w-]+(?:\.[\w-]+)*)@(acme\.org|acme\.com)$/;
            var isNotEmpty = /\S+/.test(inputValue);
            var messageEl = document.getElementById('#{id:emailValidationMsg}');
            
            if (!isNotEmpty) {
                messageEl.textContent = '邮箱不能为空';
                messageEl.style.color = '#dc3545';
            } else if (!emailRegex.test(inputValue)) {
                messageEl.textContent = '请输入acme.org或acme.com域名的邮箱';
                messageEl.style.color = '#dc3545';
            } else {
                messageEl.textContent = '';
            }
        ]]></xp:this.script>
    </xp:eventHandler>
</xe:inputText>

<!-- 用于显示客户端实时提示的控件 -->
<xp:message id="emailValidationMsg" for="emailInput" styleClass="mt-1 small" />

关键逻辑说明 #

1. 域名自动转小写

   • 每次按键抬起时，检测输入内容中的@符号位置，拆分出邮箱的本地部分（@之前）和域名部分（@之后）
   • 将域名部分调用toLowerCase()转为小写，重新拼接后更新输入框的值

2. 即时验证提示

   • 使用与服务器端一致的正则表达式（因域名已转小写，客户端无需区分大小写匹配）
   • 先验证非空，再验证格式是否符合要求
   • 通过绑定的xp:message控件显示实时提示，验证通过时清空提示内容

注意事项 #

• 客户端正则需与服务器端regex_email保持同步，避免两端验证规则不一致
• 使用#{id:emailValidationMsg}获取消息控件的客户端ID，适配Xpages动态生成ID的特性
• submit="false"确保事件仅在客户端处理，不会触发服务器提交
• 若使用xe:djTextBox等其他输入控件，逻辑完全通用，只需替换控件类型即可

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