代码总结：注册/登录等表单验证后如何做到可控的提交

落日映苍穹つ 2022-05-13 07:04 108阅读 0赞

*  需求：表单验证逻辑，除了用到ajax回调部分，如昵称是否存在，其它的诸如邮箱格式，密码强度等都应该在前台验证并给出提示信息，一旦有误，是不能被提交的，如何让按钮动态的不可提交呢？
 *  想法：控制input的type属性为普通的button或可提交的submit即可，那么怎么动态呢？给按钮添加mouseover事件，因为click之前肯定会触发它进行验证
 *  场合：登录内容为空时，点击登录按钮无效；注册页面验证报错时，点击提交无效
 *  好处：初学servlet时，做登录和注册功能时，提交表单后在服务器端做了大量的验证工作，并且提示信息是服务器响应到本地的，导致服务端“过胖“。通过严密地提交可以减少服务器端程式的逻辑量，并且前后台分工更清晰合理。  
    ![这里写图片描述][70]![这里写图片描述][70 1]  
    ![这里写图片描述][70 2]![这里写图片描述][70 3]
 *  代码：

//检查注册表单，没有不法，则设置成可提交
    $("#registerbtn").mouseover(function(){ 
        if($("#tip1").html() != "" || $("#tip2").html() != "" || $("#tip3").html() != ""){
            $("#tip4").css("color","red");
            $("#tip4").html("!");
        }else if($('#register div form .input_box:eq(0) input').val()=="" && $('#register div form .input_password:eq(1) input').val()==""){
            $("#tip4").css("color","red");
            $("#tip4").html("!");
        }else{
            $("#tip4").css("color","green");
            $("#tip4").html("✔");
            $(this).attr("type","submit");
        }
    });
    $("#registerbtn").mouseout(function(){ 
        $("#tip4").html("");
    });

//检查登录表单，不为空则可提交
    $("button").mouseover(function(){ 
        var account = $("#con form input:first").val();
        var pwd = $("#con form input:eq(1)").val();
        if(account != "" && pwd != ""){
            $("button").attr("type","submit");
        }else{
            $("button").attr("type","button");
        }
        });

[70]: https://img-blog.csdn.net/20180911114410282?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpY2hhX2k=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220513/5a4a68fde56147b58acb7afad67f3389.png
[70 2]: https://img-blog.csdn.net/20180911115040241?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpY2hhX2k=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: /images/20220513/51dc178640eb4dbfa2fdbce5138bf8cc.png