form jquery 禁止提交表单 js阻止form表单提交

转载

mob64ca13fb1f2e 2023-08-18 17:57:04

文章标签 form jquery 禁止提交表单 js 表单 html ajax 文章分类 jQuery 前端开发

背景：有一个表单，在对表格输入值时，需要实时对对输入的值进行监控，并及时做出提示，如果输入不符合要求，就不能提交表单。
尝试过程
2.1. 想要通过在form上创建一个obsubmit触发事件来阻止表单提交，代码如下：onsubmit="return check_form()"

function check_form(){
    	  	/*
            提交检测表单，配合度concert等是否符合要求，不符合就终止提交
             */
            $('tr').each(function () {
                var user_id = this.id;
                var concert = $('#concert_'+user_id).val()
                if (concert !== ''){
                    if (concert >= 10 && concert <= 0) {
                        $("#span_" + assingee_id).css('display', 'block');
                        return false
                    }
                }
            })
            var concert = $('.cencert').val()
            console.log('concert:',concert)
    	  }

结果说明：在那个位置返回的return false,并没有能阻止表单的提交。但如果在function的最后添加上return false就能阻止表单的提交，但这样无论是符合填写要求or不符合填写要求都不会提交表单，并不是自己想要的。
2.2. 于是自己在网上查找对应的解决方案，但查询到的都是一些简单的案例，并不能就自己的问题来解决。
2.3. 当然我找到了另一种解决方案：
思路：在check_form()中提交ajax请求，最后return,这样既能提交请求，也可以在不符合要求的情况下阻止表单的提交，但最终这个方法自己没有去执行。
附上代码：

function check_form() {
            const name = $.trim($("#name").val());
           
            // 判断输入的值
            if (!name) {
                alert("名字不能为空！");
                return false;
            }
            const form_data = $("#form_data").serialize();
            // 异步提交数据到后台
            $.ajax({
                url: "{% url 'bugs:project' %}",
                data: {"form_data": form_data,'path':path, "action": action},
                type: "post",
                dataType: "json",
                beforeSend: function () {
                    $("#tip").html("<span style='color:blue'>正在处理...</span>");
                    return true;
                },
                success: function (data) {
                    if (data) {
                        var msg = "添加";
                        if (data == "update") msg = "修改";
                        $("#tip").html("<span style='color:blueviolet'>恭喜，" + msg + "成功！</span>");
                        alert(msg + "OK！");
                        location.reload();
                    }
                    else {
                        if (data == -2) alert("项目名不能重复！");
                        $("#tip").html("<span style='color:blueviolet'>失败！请重试 </span>");
                        alert("操作失败");
                    }
                },
                error: function () {
                    alert("请求出错！");
                },
                complete: function () {
                    $("#acting_tips").hide();
                }
            });
            return false;
        }

结果说明这个份代码是可行的，但我没有运用到我这次的需求中
3.使用了each方法对该列表格进行遍历，不符合要求的，就给予提示，并设置sumit按钮不可选。
附上代码：

$('tr').each(function () {
            var user_id = this.id;
            concert = $('#concert_' + user_id).val();
            if (concert !== '') {
                if (concert > 10 || concert < 0) {
                    // 显示提示
                    $('#submit').attr('disabled', 'true');
                    return false
                } else {
                    $('#submit').removeAttr('disabled');
                }
            }
        });

**方法说明：**达到了自己的需求，但始终感觉不是正常的常规做法。