输入含点时如何阻止模态框关闭？模态框关闭异常排查

我来帮你搞定这个问题！你的核心问题在于按钮的点击事件没有传递验证函数的返回值，导致即使check()返回false，模态框的关闭逻辑还是被触发了。另外你代码里还有个小笔误：检查的是点（.），但提示的是不能包含逗号（commas），记得改过来哦😉

具体修复步骤： #

1. 修改按钮的onclick事件 #

把原来的onclick="check();"改成onclick="return check();"，这样当check()返回false时，会阻止按钮的默认行为（比如关闭模态框）：

<input type="button" id="applyButton" value="Apply" class="btn btn-default" onclick="return check();">

2. 移除按钮的data-dismiss="modal"属性（如果有的话） #

如果你用的是Bootstrap模态框，很多人会给按钮加data-dismiss="modal"属性来快速关闭模态框，但这个属性会强制触发模态框关闭，完全不受你的JS验证控制。所以一定要把这个属性删掉！

3. 更新check()函数，验证通过时手动关闭模态框 #

当输入符合要求时，我们再手动调用模态框的关闭方法。假设你的模态框id是myModal（根据你实际的模态框id修改）：

function check(){
    const columnValue = $("#columnName").val();
    // 检查是否包含点号，同时修正提示文本的笔误
    if(columnValue.indexOf(".") !== -1){
        alert("Column name can't contain dots!");
        return false;
    }
    // 验证通过，手动关闭模态框
    $("#myModal").modal('hide');
    return true;
}

为什么原来的代码无效？ #

原来的onclick="check();"只是执行了验证函数，但没有把返回值返回给浏览器。浏览器收到的是undefined（因为没有返回值），会默认执行按钮的默认行为——也就是关闭模态框。而return check();会把验证结果返回给浏览器，当结果是false时，浏览器就会阻止默认行为，模态框也就不会关闭了。

内容的提问来源于stack exchange，提问作者Pavel_K