【核心代码】JS+ajax无刷新验证短信验证码和缓存中的是否一致提交表单

// 发送短信验证码并验证的函数
function sendSMSAndVerify(phoneNumber, formData) {
    $.ajax({
        url: '/api/sms/send', // 发送短信验证码的API接口
        type: 'POST',
        data: { phone: phoneNumber },
        dataType: 'json',
        success: function(response) {
            if (response.status === 'success') {
                // 短信发送成功，缓存验证码
                sessionStorage.setItem('smsCode', response.code);
                // 开始验证短信验证码
                verifySMSCode(phoneNumber, response.code, formData);
            } else {
                alert('短信发送失败，请稍后重试。');
            }
        },
        error: function() {
            alert('请求失败，请检查网络连接。');
        }
    });
}
 
// 验证短信验证码的函数
function verifySMSCode(phoneNumber, code, formData) {
    $.ajax({
        url: '/api/sms/verify', // 验证短信验证码的API接口
        type: 'POST',
        data: { phone: phoneNumber, code: code },
        dataType: 'json',
        success: function(response) {
            if (response.status === 'success') {
                // 验证成功，提交表单
                $('#yourForm').submit();
            } else {
                alert('验证码错误。');
            }
        },
        error: function() {
            alert('请求失败，请检查网络连接。');
        }
    });
}
 
// 假设你有一个表单的id为yourForm，电话号码字段为phone
// 当用户提交表单时，执行以下操作：
$('#yourForm').submit(function(e) {
    e.preventDefault(); // 阻止表单默认提交行为
    var phoneNumber = $('#phone').val(); // 获取电话号码
    var formData = $(this).serialize(); // 序列化表单数据
    sendSMSAndVerify(phoneNumber, formData); // 发送短信并验证
});

这段代码首先定义了sendSMSAndVerify函数，该函数通过AJAX调用发送短信验证码的API接口，并在成功获取验证码后调用verifySMSCode函数进行验证。verifySMSCode函数则用于验证用户输入的验证码是否与缓存中的验证码一致，一致则提交表单，不一致则给出错误提示。最后，当用户尝试提交表单时，我们阻止了表单的默认提交行为，并调用sendSMSAndVerify函数进行操作。