检查email格式并确保email唯一

最新推荐文章于 2024-03-06 08:37:30 发布

原创最新推荐文章于 2024-03-06 08:37:30 发布 · 2.1k 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用Ajax进行实时邮箱验证的功能实现过程。当用户输入邮箱时，系统会即时检查邮箱的有效性和唯一性，并通过UI反馈结果。具体包括：监听输入框变化、正则表达式校验、发送异步请求验证邮箱是否已被注册等。

$panelBefore.find('.email-input').on('input', function () {
                        var $this = $(this),
                            $subEmail = $panelBefore.find('.submit-newemail'),
                            email = $.trim($this.val()),
                            pattern = /\w+([\-+.']\w+)*@\w+([\-.]\w+)*\.\w+([\-.]\w+)*/,
                            $recognised = $panelBefore.find('.recognised');

                        if (ajaxRegisterEmail !== undefined) {
                            ajaxRegisterEmail.abort();
                        }

                        if (email !== '' && pattern.test(email)) {
                            ajaxRegisterEmail = $.ajax({
                                url: getUncachedUrl('/' + currentLanguage + '/Base/BaseHandler'),
                                type: 'POST',
                                data: {
                                    act: 'validate-email',
                                    email: email
                                },
                                success: function (data) {
                                    if (data.status === 's') {
                                        $recognised.slideDown();
                                        $subEmail.prop('disabled', true);
                                    } else {
                                        $recognised.hide();
                                        $subEmail.prop('disabled', false);
                                    }
                                }
                            });
                        } else {
                            if (email === '') {
                                $subEmail.prop('disabled', true);
                            } else {
                                $subEmail.prop('disabled', false);
                            }
                            $recognised.hide();
                        }

                    });