前端用户名注册异步请求实现 

 //目标:异步注册提交请求
        //给注册按钮注册点击事件
    $("#registerBtn").click(function () {
        //获取用户输入用户名与建立邮箱正则表达式
        var usernameVal = $("#username").val();
        var tegUsername = /^[a-zA-Z]\w{5,15}$/;

        //获取用户输入密码与建立邮箱正则表达式
        var passwordVal = $("#password").val();
        var tegPassword = /^[a-zA-Z]\w{5,15}/;

        //获取用户输入邮箱与建立邮箱正则表达式
        var emailVal = $("#email").val();
        var tegEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;

        ////获取用户输入名字与建立邮箱正则表达式
        var nameVal = $("#name").val();
        var tegName=/^[\u4e00-\u9fa5]{1,5}$/;

        //获取用户输入手机号与建立邮箱正则表达式
        var telephoneVal = $("#telephone").val();
        var tegTelephone=/^1[3578]\d{9}/;

        //获取用户输入手机号与建立邮箱正则表达式
        var birthdayVal = $("#birthday").val();
        var tegBirthday=/^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/;

        //效验用户输入所有数据是否正确
        if (!tegUsername.test(usernameVal)) {
            //不正确提示错误信息
            $("#msg").text("用户名格式错误");
        } else if (!tegPassword.test(passwordVal)){
            $("#msg").text("密码格式不正确");
        }else if (!tegEmail.test(emailVal)){
            $("#msg").text("邮箱格式不正确");
        }else if (!tegName.test(nameVal)){
            $("#msg").text("名字格式不正确");
        }else if(!tegTelephone.test(telephoneVal)){
            $("#msg").text("电话格式不正确");
        }else if (!tegBirthday.test(birthdayVal)){
            $("#msg").text("生日格式不正确");
        }else {
            //全部正确清空错误信息
            $("#msg").text("");
            //获取表单所有数据
            var dataAll = $("#registerForm").serialize();
            //发送异步请求
            $.post({
                //请求地址
                url: "UserServlet",
                //发送数据
                data: dataAll,
                //发送成功函数
                success: function (result) {
                    if (result == "true") {
                        //成功跳转成功页面
                        location.href = "register_ok.html";
                    } else {
                        //接收后端注册失败原因显示
                        $("#msg").text(result);
                        $("#checkCodeImg").click();
                    }
                },
                //失败函数
                error: function (error) {
                    console.log(error);
                    alert("服务器忙");
                    $("#checkCodeImg").click();
                }
            });
        }
    });

 

 1  //目标:异步注册提交请求
 2         //给注册按钮注册点击事件
 3     $("#registerBtn").click(function () {
 4         //获取用户输入用户名与建立邮箱正则表达式
 5         var usernameVal = $("#username").val();
 6         var tegUsername = /^[a-zA-Z]\w{5,15}$/;
 7 
 8         //获取用户输入密码与建立邮箱正则表达式
 9         var passwordVal = $("#password").val();
10         var tegPassword = /^[a-zA-Z]\w{5,15}/;
11 
12         //获取用户输入邮箱与建立邮箱正则表达式
13         var emailVal = $("#email").val();
14         var tegEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
15 
16         ////获取用户输入名字与建立邮箱正则表达式
17         var nameVal = $("#name").val();
18         var tegName=/^[\u4e00-\u9fa5]{1,5}$/;
19 
20         //获取用户输入手机号与建立邮箱正则表达式
21         var telephoneVal = $("#telephone").val();
22         var tegTelephone=/^1[3578]\d{9}/;
23 
24         //获取用户输入手机号与建立邮箱正则表达式
25         var birthdayVal = $("#birthday").val();
26         var tegBirthday=/^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/;
27 
28         //效验用户输入所有数据是否正确
29         if (!tegUsername.test(usernameVal)) {
30             //不正确提示错误信息
31             $("#msg").text("用户名格式错误");
32         } else if (!tegPassword.test(passwordVal)){
33             $("#msg").text("密码格式不正确");
34         }else if (!tegEmail.test(emailVal)){
35             $("#msg").text("邮箱格式不正确");
36         }else if (!tegName.test(nameVal)){
37             $("#msg").text("名字格式不正确");
38         }else if(!tegTelephone.test(telephoneVal)){
39             $("#msg").text("电话格式不正确");
40         }else if (!tegBirthday.test(birthdayVal)){
41             $("#msg").text("生日格式不正确");
42         }else {
43             //全部正确清空错误信息
44             $("#msg").text("");
45             //获取表单所有数据
46             var dataAll = $("#registerForm").serialize();
47             //发送异步请求
48             $.post({
49                 //请求地址
50                 url: "UserServlet",
51                 //发送数据
52                 data: dataAll,
53                 //发送成功函数
54                 success: function (result) {
55                     if (result == "true") {
56                         //成功跳转成功页面
57                         location.href = "register_ok.html";
58                     } else {
59                         //接收后端注册失败原因显示
60                         $("#msg").text(result);
61                         $("#checkCodeImg").click();
62                     }
63                 },
64                 //失败函数
65                 error: function (error) {
66                     console.log(error);
67                     alert("服务器忙");
68                     $("#checkCodeImg").click();
69                 }
70             });
71         }
72     });
View Code

 

posted @ 2020-06-17 00:04  偶系莱卐の  阅读(123)  评论(0)    收藏  举报