Joomla注册表单姓名字段自动拼接域名填充邮箱问题求助

问题梳理 #

• 目标效果：用户在姓名字段输入内容后，系统自动拼接固定邮件域名后缀，生成格式为用户输入值@domain.com的邮箱地址，自动填充到隐藏的邮箱字段，无需用户手动输入邮箱即可通过注册校验，开发者自身为邮件服务提供商，不需要用户填写第三方邮箱完成注册。
• 现有代码已实现能力：
  • 隐藏注册表单间隔项、必填星标、主邮箱字段、确认密码字段、确认邮箱字段
  • 密码输入时自动同步值到确认密码字段
  • 主邮箱字段值自动同步到确认邮箱字段
  • 姓名字段输入时同步值到主邮箱字段
• 待修复问题：姓名字段联动逻辑未拼接固定邮箱后缀，且代码存在一处语法错误。

前置错误修复 #

原有代码变量声明段存在无效残留内容，会直接导致JS执行中断，必须先删除：

// 错误写法 末尾多了无效的@domain.com<<<
var name        = regForm.find('#jform_name'); @domain.com<<<
// 修正后写法
var name        = regForm.find('#jform_name');

核心逻辑修改 #

字符串拼接是JS基础能力，直接用+连接输入值和固定后缀即可，修改后的姓名字段联动代码如下，额外做了输入兼容和无效值过滤：

// 同时绑定input事件，兼容粘贴、输入法联想输入场景，比仅绑定keyup覆盖更全面
name.on('input keyup', function() {
    // 过滤用户输入的首尾空白字符，避免生成带无效空格的邮箱
    const nameVal = $(this).val().trim();
    // 拼接固定域名后缀赋值给主邮箱字段，输入为空时邮箱也置空
    email.val(nameVal ? nameVal + '@domain.com' : '');
    // 主动触发邮箱字段的keyup事件，自动同步值到确认邮箱字段，无需重复写赋值逻辑
    email.trigger('keyup');
});

完整可用代码 #

替换原有逻辑后的完整PHP注入JS代码如下：

$doc = JFactory::getDocument();
$js = "
jQuery(document).ready(function($){
    // 表单元素声明
    var regForm     = $('#member-registration');
    var name        = regForm.find('#jform_name');
    var password    = regForm.find('#jform_password1');
    var password2   = regForm.find('#jform_password2');
    var email       = regForm.find('#jform_email1');
    var email2      = regForm.find('#jform_email2');

    // 隐藏无需用户操作的表单项
    regForm.find('.spacer').parents('.control-group').hide();
    regForm.find('.star').hide();
    email.parents('.control-group').hide();
    password2.parents('.control-group').hide();
    email2.parents('.control-group').hide();  

    // 密码自动同步到确认密码
    password.on('input keyup', function() {
        password2.val($(this).val());
    });

    // 姓名输入自动生成对应邮箱
    name.on('input keyup', function() {
        const nameVal = $(this).val().trim();
        email.val(nameVal ? nameVal + '@domain.com' : '');
        email.trigger('keyup');
    });

    // 主邮箱自动同步到确认邮箱
    email.on('keyup', function() {
        email2.val($(this).val());
    });
});    
";    
$doc->addScriptDeclaration($js);

补充注意事项 #

• 代码中的domain.com需要替换为你实际使用的邮件域名
• 不要仅依赖前端JS生成邮箱，建议在Joomla注册表单的服务端校验/处理逻辑中加一层兜底生成逻辑，避免用户禁用JS导致注册失败、生成无效邮箱
• 建议给姓名字段加输入格式限制，禁止用户输入@、空格、特殊符号，避免生成不符合邮箱规范的地址

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