如何在XPages/JSF应用客户端onkeyup事件复用邮箱正则校验？

要在XPages的xe:input控件上实现客户端onkeyup即时校验（复用服务端正则）+ 强制邮箱域名小写，可以按以下步骤实现：

核心实现代码 #

直接修改你的xe:input控件，添加onkeyup事件处理脚本：

<xe:inputText id="inputEmail">
    <!-- 保留原服务端校验规则 -->
    <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:this.onkeyup><![CDATA[
        const input = this;
        let value = input.value.trim();
        const parentNode = input.parentNode;
        
        // 1. 处理必填提示
        if (value === '') {
            let errorSpan = parentNode.querySelector('.xspMessageError');
            if (errorSpan) {
                errorSpan.textContent = '邮箱不能为空';
            } else {
                errorSpan = document.createElement('span');
                errorSpan.className = 'xspMessageError';
                errorSpan.textContent = '邮箱不能为空';
                parentNode.appendChild(errorSpan);
            }
            return;
        }

        // 2. 强制邮箱域名转为小写
        const atIndex = value.indexOf('@');
        if (atIndex !== -1) {
            const localPart = value.substring(0, atIndex);
            const domainPart = value.substring(atIndex + 1).toLowerCase();
            input.value = `${localPart}@${domainPart}`;
            value = input.value; // 更新处理后的值用于校验
        }

        // 3. 复用服务端正则进行格式校验
        const regexStr = "#{javascript:applicationScope.get('regex_email')}$"; // 加$确保匹配整个输入
        const emailRegex = new RegExp(regexStr);
        const isValid = emailRegex.test(value);

        // 4. 显示/隐藏校验提示
        let errorSpan = parentNode.querySelector('.xspMessageError');
        if (!isValid) {
            if (!errorSpan) {
                errorSpan = document.createElement('span');
                errorSpan.className = 'xspMessageError';
                parentNode.appendChild(errorSpan);
            }
            errorSpan.textContent = '请遵循邮箱格式规则（仅允许acme.org或acme.com域名）';
        } else {
            if (errorSpan) errorSpan.remove();
        }
    ]]></xp:this.onkeyup>
</xe:inputText>

关键逻辑说明 #

• 复用服务端正则：通过#{javascript:applicationScope.get('regex_email')}直接读取应用级正则变量，保证前后端校验规则完全一致，避免维护两套规则的麻烦。
• 强制域名小写：在用户输入时自动提取@后的域名部分，转为小写后重新赋值给输入框，从根源上防止大写域名输入。
• 即时校验反馈：在onkeyup事件中实时校验，通过创建/移除XPages风格的错误提示元素，给用户即时反馈，体验更友好。
• 统一提示风格：错误提示使用XPages默认的xspMessageError类，和服务端校验提示样式保持一致，视觉统一。

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