javascript - jquery 控制表单 填写不完整不可提交

问题描述

问 题

我想实现这样的效果： 当表单填写完整时，提交按钮 改为可提交，如果删除某一项，则提交按钮变为不可提交。

     var ok1 = 0;
        var ok2 = 0;
        var ok3 = 0;
        var ok4 = 0;
        
        $("#username").on('input',function(e){
            if($(this).val() != ''){
                //alert('username');
                ok1 = 1;
            }else{
                ok1 = 0;
            }
        });
        
        $("#vcode").on('input',function(e){
            if($(this).val() != ''){
                //alert('vcode');
                ok2 = 1;
            }else{
                ok2 = 0;
            }
        });
        
        $("#password").on('input',function(e){
            if($(this).val() != ''){
                //alert('password');
                ok3 = 1;
            }else{
                ok3 = 0;
            }
        });
        
        $("#password2").on('input',function(e){
            if($(this).val() != ''){
                //alert('password2');
                ok4 = 1;
            }else{
                ok4 = 0;
            }
        });
        
        if(ok1){
            alert(ok1);
            $(".regBar").attr("disabled",false);
            $(".regBar").css("color", "#fff");
            $(".regBar").addClass("disabled");
        } else {
            alert(ok1);
            $(".regBar").attr("disabled",true);
            $(".regBar").css("color", "#ccc");
            $(".regBar").removeClass("disabled");
        }

这样写有问题，求大神赐教！！！

解决方案

应该监听表单的提交事件，阻止默认动作。然后触发了提交后先挨个检查选项，如果有未校验通过的直接return，最后全局校验通过在提交。

按照你的代码逻辑，举个例子

function isNullInput(ele) {
  if (ele.value.length <= 0) return true;
}

$('form').on('submit', function(ev) {
  var verification = ['#username', '#vcode', '#password', '#password2'].filter(function(id) {
    if (isNullInput($(id))) return true;
  }).length;

  if (!verification) return ev.preventDefault();
});

这篇关于javascript - jquery 控制表单 填写不完整不可提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！