点击按钮调用AJAX的addUser函数提交通过邮箱验证的用户数据问题

现有代码核心问题 #

• 验证函数无返回值，无法判断邮箱是否校验通过：当前validation执行后没有返回布尔值，上层调用方无法知道是否可以继续提交数据
• 错误提示逻辑错误：进入validation函数就直接给错误提示元素赋值了错误文案，哪怕邮箱格式正确也会默认显示报错；且校验不通过的分支里没有执行任何显示错误的逻辑，只是写了个变量名，无实际作用
• 校验通过后未调用addUser提交数据：当前addUserClient仅执行了校验逻辑，没有后续调用提交接口的代码
• 未传入addUser要求的回调参数：addUser第三个参数要求传入处理接口返回结果的回调函数，之前的代码完全没有处理这部分逻辑

修复后代码 #

校验函数修改 #

function validation() {
    const emailRegex = /^\w+[\w-+\.]*\@\w+([-\.]\w+)*\.[a-zA-Z]{2,}$/;
    const usernameInput = document.getElementById("userName").value;
    const emailInput = document.getElementById("userEmail").value;
    const emailErrEl = document.getElementById('emailErr');
    // 先清空之前的报错
    emailErrEl.textContent = '';
    if(!emailRegex.test(emailInput)) {
        // 校验不通过才显示报错
        emailErrEl.textContent = "please enter a valid email address";
        // 返回校验结果
        return {
            valid: false
        }
    }
    // 校验通过返回结果和用户填写的内容
    return {
        valid: true,
        username: usernameInput,
        email: emailInput
    }
}

提交逻辑修改 #

function addUserClient() {
    const validateResult = validation();
    // 校验不通过直接终止
    if (!validateResult.valid) return;
    // 校验通过调用addUser提交
    addUser(validateResult.username, validateResult.email, function(res) {
        if (res.success) {
            // 提交成功的处理逻辑，可根据业务需求调整
            alert('用户添加成功');
            document.getElementById("userName").value = '';
            document.getElementById("userEmail").value = '';
        } else {
            // 提交失败的处理逻辑
            alert('提交失败：' + res.error);
        }
    })
}

document.getElementById('addUserButton').addEventListener('click', addUserClient);

注意事项 #

原有addUser里用了随机数模拟接口成功/失败，所以提交时会概率出现报错，属于模拟逻辑的正常现象，实际对接后端接口时替换对应接口地址和参数即可。也可以根据业务需求补充用户名非空校验等逻辑，当前仅修复了原有邮箱校验和提交的核心问题。

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