注册JQuery使用ajax调用后台方法，判断用户名、邮箱是否存在，并显示隐藏提示

最新推荐文章于 2022-01-13 18:01:14 发布

我心V飞翔

最新推荐文章于 2022-01-13 18:01:14 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

文章标签： ajax jquery 邮箱 javascript

本文链接：https://blog.youkuaiyun.com/ful1021/article/details/10905069

本文介绍了一个用户注册过程中的前端验证逻辑，包括用户名和邮箱的唯一性检查。通过JavaScript和Ajax实现与后端的交互，确保用户体验的同时防止重复注册。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript代码

        function existUserName(userName, reqUserName) {
            if (userName.val().length > 0) {
                $.ajax({
                    type: "POST",
                    url: window.location + "/ExistLoginId", //url格式为  要访问的aspx页面/方法名称  
                    data: "{'id': '" + userName.val() + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        if (data.d == "1") {
                            reqUserName.show();
                            return false;
                        } else {
                            return true;
                        }
                    }
                });
            }
        }
        function existMail(mail, reqMail) {
            if (mail.val().length > 0) {
                $.ajax({
                    type: "POST",
                    url: window.location + "/ExistMail", //url格式为  要访问的aspx页面/方法名称  
                    data: "{'id': '" + mail.val() + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        if (data.d == "1") {
                            reqMail.show();
                            return false;
                        } else {
                            return true;
                        }
                    }
                });
            }
        }
        $(function () {
            var userName = $("#txtUserName");
            var reqUserName = $("#reqUserName");
            var mail = $("#txtEmail");
            var reqMail = $("#reqMail");
            userName.blur(function () {
                existUserName(userName, reqUserName);
            }).focus(function () {
                reqUserName.hide();
            });
            mail.blur(function () {
                existMail(mail, reqMail)
            }).focus(function () {
                reqMail.hide();
            });           
        });

HTML代码

            <div class="form_row">
                <label class="contact"><strong>用户名:</strong></label>
                <asp:TextBox runat="server" ID="txtUserName" CssClass="contact_input" ValidationGroup="reg" ClientIDMode="Static" />
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="用户名必填" Text="*" ControlToValidate="txtUserName" ForeColor="Red" ValidationGroup="reg" Display="Dynamic"></asp:RequiredFieldValidator>
                <asp:RegularExpressionValidator ID="reqUserName1" ClientIDMode="Static" runat="server" ControlToValidate="txtUserName" Display="Dynamic" ErrorMessage="用户名只能使用字母或者数字组合" ForeColor="Red" ValidationExpression="(\w+)|(\d+)|(\w+\d+)" ValidationGroup="reg"></asp:RegularExpressionValidator>
                <span id="reqUserName" style="color: Red; display: none">此用户名已经被注册了</span>
            </div>

            <div class="form_row">
                <label class="contact"><strong>邮箱地址:</strong></label>
                <asp:TextBox runat="server" ID="txtEmail" ClientIDMode="Static" CssClass="contact_input" ValidationGroup="reg" />
                <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="邮箱必填" Text="*" ControlToValidate="txtEmail" Display="Dynamic" ForeColor="Red" ValidationGroup="reg"></asp:RequiredFieldValidator>
                <asp:RegularExpressionValidator ID="reqMail1" ClientIDMode="Static" runat="server" ErrorMessage="邮箱格式不对" ControlToValidate="txtEmail" Display="Dynamic" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ForeColor="Red" ValidationGroup="reg"></asp:RegularExpressionValidator>
                <span id="reqMail" style="color: Red; display: none">此邮箱已经被注册了</span>
            </div>

后台.cs代码

        private bool CheckVCode()
        {
            string userCode = txtVCode.Text.Trim();
            if (Session["VCode"] != null)
            {
                string sysCode = Session["VCode"].ToString();
                if (String.Compare(userCode, sysCode, true) == 0)
                {
                    return true;
                }
                else
                {
                    JScript.Alert(this, "验证码输入错误");
                }
            }
            else
            {
                JScript.Alert(this, "验证码过期");
            }
            return false;
        }

        protected void btRegister_Click(object sender, EventArgs e)
        {
            UsersBLL bll = new UsersBLL();
            UserInfo model = new UserInfo();
            if (!IsValid || !CheckVCode())
            {
                return;
            }
            if (ExistLoginId(txtUserName.Text.Trim()) == "1")
            {
                JScript.Alert("此用户名已经被注册过了！");
                return;
            }
            if (ExistMail(txtEmail.Text.Trim()) == "1")
            {
                JScript.Alert("此邮箱已经被注册过了！");
                return;
            }
            model.LoginId = txtUserName.Text.Trim();
            model.LoginPwd = WebComm.MD5Str(txtPwd.Text.Trim());
            model.Mail = txtEmail.Text.Trim();
            model.Name = txtRealName.Text.Trim();
            model.Phone = txtPhone.Text.Trim();
            model.Address = txtAddress.Text.Trim();
            model.UserRoleId = 1;
            model.UserStateId = 1;
            if (bll.InsertUser(model))
            {
                Session["id"] = model.Id;
                Session["loginId"] = model.LoginId;
                Session["name"] = model.Name;
                JScript.AlertAndRedirect(this, "注册成功!", "../Default.aspx");
            }
            else
            {
                JScript.Alert(this, "注册失败!");
            }
        }

        [WebMethod]
        public static string ExistLoginId(string id)
        {
            Bookshop.BLL.UsersBLL bll = new UsersBLL();
            return bll.ExistLoginId(id.Trim()) ? "1" : "0";
        }
        [WebMethod]
        public static string ExistMail(string id)
        {
            Bookshop.BLL.UsersBLL bll = new UsersBLL();
            return bll.ExistMail(id.Trim()) ? "1" : "0";
        }