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

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";
        }

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是使用 Ajax 实现判断表单中用户名是否存在代码示例: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>判断用户名是否存在</title> </head> <body> <form> <label for="username">用户名:</label> <input type="text" id="username" name="username"> <span id="tip"></span> <br> <input type="submit" value="提交"> </form> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(function() { $('#username').on('blur', function() { var username = $(this).val(); $.ajax({ type: 'POST', url: 'check_username.php', data: {username: username}, dataType: 'json', success: function(res) { if (res.code === 200) { $('#tip').text('用户名存在'); } else { $('#tip').text('用户名可用'); } }, error: function() { alert('请求失败'); } }); }); }); </script> </body> </html> ``` 上面的代码中,我们使用jQuery 库来简化 Ajax 请求的操作。当用户用户名输入框中输入完毕后,我们通过 `blur` 事件来触发 Ajax 请求。在 Ajax 请求中,我们将用户名通过 POST 请求发送到 `check_username.php` 文件中进行处理。如果用户名已经存在,那么我们返回一个 JSON 格式的数据,其中 `code` 字段为 `200`,表示用户名存在;否则 `code` 字段为 `0`,表示用户名可用。在 Ajax 请求成功后,我们通过 `success` 回调函数来处理返回的数据,根据返回的 `code` 字段来判断用户名是否可用,并将提示信息显示在页面中。如果 Ajax 请求失败,那么我们通过 `error` 回调函数来弹出提示框。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值