- 背景:有一个表单,在对表格输入值时,需要实时对对输入的值进行监控,并及时做出提示,如果输入不符合要求,就不能提交表单。
- 尝试过程
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');
}
}
});
**方法说明:**达到了自己的需求,但始终感觉不是正常的常规做法。
- 总结感想:这个问题其实满简单解决的,但由于自己写代码之初,没有设计这个需求,就没有使用2.3上面的方法进行解决,采用的是直接form post直接提交。导致后面的check_form()return false失败。