如何在jQuery点击事件触发前执行blur事件？附手机号验证代码

针对你的手机号唯一性验证场景，要实现点击事件触发前先执行blur验证逻辑，核心要解决两个问题：一是确保blur事件优先执行，二是处理异步验证的时序问题（因为你的UniquePhoneService.ValidateUniquePhoneNumber是异步回调）。下面结合你的代码给出具体解决方案：

首先先优化你的原blur事件代码，缓存DOM元素提升性能和可读性：

// 提前缓存常用DOM元素，避免重复查询
const $phoneInput = $('[datakey=PhoneMobile]');
const $errorSpan = $phoneInput.siblings('span.unique-phone-error');

$phoneInput.blur(function() { 
    const phoneVal = $phoneInput.val();
    const accountType = $('[datakey=accounttype]').val();
    const country = $('#FocusAccountCountry').val();
    const accountCode = $('[datakey=enrollingaccountcode]').val();

    UniquePhoneService.ValidateUniquePhoneNumber(phoneVal, accountType, country, accountCode, function(result) { 
        if (!result) { 
            $errorSpan.text('<%= GetResourceValue("CustomerInfo", "DuplicatePhoneNumber", "Text")%>'); 
            Page_IsValid = false; 
        } else { 
            $errorSpan.text(''); 
            Page_IsValid = true; 
        } 
    }); 
});

方法1：异步验证场景下的正确处理（推荐） #

因为你的手机号验证是异步的，直接触发blur可能还没拿到验证结果就执行了点击逻辑。我们可以把验证逻辑包装成Promise，在点击事件中等待验证完成：

// 把验证逻辑封装成Promise，方便异步等待
function validatePhoneUnique() {
    return new Promise((resolve) => {
        const phoneVal = $phoneInput.val();
        const accountType = $('[datakey=accounttype]').val();
        const country = $('#FocusAccountCountry').val();
        const accountCode = $('[datakey=enrollingaccountcode]').val();

        UniquePhoneService.ValidateUniquePhoneNumber(phoneVal, accountType, country, accountCode, function(result) { 
            if (!result) { 
                $errorSpan.text('<%= GetResourceValue("CustomerInfo", "DuplicatePhoneNumber", "Text")%>'); 
                Page_IsValid = false; 
            } else { 
                $errorSpan.text(''); 
                Page_IsValid = true; 
            }
            resolve(result); // 将验证结果传递给Promise
        }); 
    });
}

// 绑定原blur事件
$phoneInput.blur(function() {
    validatePhoneUnique();
});

// 处理提交按钮的点击事件
$('your-submit-button-selector').click(async function(e) {
    // 先执行手机号唯一性验证，等待结果返回
    const isValid = await validatePhoneUnique();
    
    if (!isValid) {
        e.preventDefault(); // 验证不通过，阻止默认提交行为
        $phoneInput.focus(); // 让输入框获得焦点，引导用户修正
        return;
    }
    
    // 验证通过，继续执行后续逻辑（比如表单提交）
});

方法2：同步验证场景下的简化处理 #

如果你的验证逻辑是同步的（没有异步回调），可以利用事件的天然触发顺序：当用户点击提交按钮时，输入框的blur事件会优先于按钮的click事件执行。此时只需在点击事件中判断验证状态即可：

// 提交按钮点击事件
$('your-submit-button-selector').click(function(e) {
    // 手动触发一次blur，确保验证逻辑执行
    $phoneInput.blur();
    
    // 判断验证状态，不通过则阻止提交
    if (!Page_IsValid) {
        e.preventDefault();
        $phoneInput.focus();
        return;
    }
});

关键注意点 #

• 缓存DOM元素：避免在事件处理函数中重复查询DOM，既提升性能也让代码更简洁。
• 异步时序控制：异步验证一定要用Promise/async-await或者回调嵌套确保验证完成后再执行后续逻辑，否则会出现“验证还没结束就提交”的问题。
• 用户体验优化：验证不通过时，除了显示错误文本，让输入框获得焦点能更直观地引导用户修正。

内容的提问来源于stack exchange，提问作者Alejandro De los santos