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

yicha_icode

于 2018-09-11 11:59:35 发布

阅读量522

点赞数

分类专栏： jquery 文章标签： jquery 表单验证按钮提交

本文链接：https://blog.csdn.net/yicha_i/article/details/82623761

版权

jquery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

//检查注册表单，没有不法，则设置成可提交
$("#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");
    }
    });