小白在项目中的增删改查错误逻辑（壹）

最新推荐文章于 2024-10-07 09:24:46 发布

前端搬砖工程师

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量203

点赞数 1

文章标签： javascript jquery

本文链接：https://blog.csdn.net/m0_47708359/article/details/108284192

版权

项目场景：

XXX仓库货物进出记录清单之记录员登录注册

问题描述：

在我们进行清单的添加、查找前需要登录（每个记录员只有自己的数据不共享，第一次使用需注册），这个过程中用户名验证（用户名、密码正则验证）发送ajax请求，确认注册（登录）时错误信息注册（登录）请求发送成功，数据代码：

// 注册请求
$('#but').on('click',function(){
    // 判断是否为空 不为空判断下一步
   if($(".name").val()!==""  && $("#password").val()!==""  && $("#password2").val()!=="" )
   {
       // 判断是否勾选协议 不为空发送请求
       console.log($(".name").val())
       console.log($("#password").val())
       console.log($("#password2").val())
    if($(".chec").prop("checked")==true){
        $.ajax({ 
            type : "POST",
            url : "http://101.37.175.185:3000/register",
            data : {
                "uname" : $('.name').val(),
                "upassword":$('#password').val()
            },
            success  : function(data){
                console.log(data)
                $("#content").show();
                $(".zhuce").hide();
                $("#timere").hide();
                function counttime() {
                    var $time = $('#Time');
                    if($time.html() === '1'){
                        window.location.href=("login.html");
                    }else{
                        $time.html($time.html()-1);
                    }
                }
                setInterval(counttime,1000);
            },
            error:function(err){}
        }) 
    }else{
        console.log($(".chec").prop("checked"))
        $(".tiao").hide();
        $("#timer").hide();
        $(".zhuce").hide();
        $("#content").show();
        $(".tiaodian").html("您未阅读协议！")
    }
   }else{
    $(".tiao").hide();
        $("#timer").hide();
        $(".zhuce").hide();
        $("#content").show();
        $(".tiaodian").html("用户名和密码不能为空!")
   }
})

原因分析：

关于用户注册时在发送ajax请求前我们都会做正则验证判断，因为正则能验证是否为空，所以能通过正则后就可以发送请求进行用户数据判断是否有同名、没有就可以注册。而我们在注册（登录）时需要进行两次ajax请求，第二次也需要逻辑判断，所以会出现没有通过验证时，错误的数据也会发生请求导致我们能成功注册（登录）。

解决方案：

通过代码分析我们可以明显看待在第二次ajax请求前的逻辑少了判断，我们只需在非空判断过后进行更严格的正则判断，必须所有通过过后才能发送ajax请求。代码：

$('#but').on('click',function(){
    // 判断是否为空 不为空判断下一步
    if($(".name").val()!==""  && $("#password").val()!==""  && $("#password2").val()!=="" ){
    //判断用户名
            if(nameReg.test($(".name").val())){
                console.log("1111")
                //判断两次密码是否一致
                if( $("#password").val()=== $("#password2").val()){
                    console.log("2222")
                    //判断是否阅读协议（是否勾选）
                    if($(".chec").prop("checked")==true){
                        console.log("3333")
                        $.ajax({ 
                            type : "POST",
                            url : "http://101.37.175.185:3000/register",
                            data : {
                                "uname" : $('.name').val(),
                                "upassword":$('#password').val()
                            },
                            success  : function(data){
                                console.log(data)
                                $("#content").show();
                                $(".zhuce").hide();
                                $("#timere").hide();
                                function counttime() {
                                    var $time = $('#Time');
                                    if($time.html() === '1'){
                                        window.location.href=("login.html");
                                    }else{
                                        $time.html($time.html()-1);
                                    }
                                }
                                setInterval(counttime,1000);
                            },
                            error:function(err){}
                        }) 
                    }else{
                        $(".tiao").hide();
                        $("#timer").hide();
                        $(".zhuce").hide();
                        $("#content").show();
                        $(".tiaodian").html("您为阅读协议！")
                    }
                }else{
                    $(".tiao").hide();
                    $("#timer").hide();
                    $(".zhuce").hide();
                    $("#content").show();
                    $(".tiaodian").html("两次密码不一致！")
                }
                
            }else{
               
                $(".tiao").hide();
                $("#timer").hide();
                $(".zhuce").hide();
                $("#content").show();
                $(".tiaodian").html("请您按照规定填写！")
            }
           }else{
               console.log("你没来吗？")
            $(".tiao").hide();
                $("#timer").hide();
                $(".zhuce").hide();
                $("#content").show();
                $(".tiaodian").html("用户名和密码不能为空!")
           }
})