表单验证失败阻止提交

表单验证失败阻止提交

提交表单的时候往往需要经过验证表单的内容是否符合要求，我们举一个例子

<form action="/search" id="search" name="search" method="GET">
    <div class="u-search">
        <input type="text" name="keyword" id="keyword" placeholder="输入搜索内容">
        <button  type="submit"></button>
    </div>
</form>

一般来说，在验证失败的时候，我们就不进行提交了，但是如果我们这么写

let form = document.forms.search;

// 验证表单是否为空
function search() {
    if (form.keyword.value === "") {
        console.log("hehe");
        return false;
    } else {
        return true;
    }
}

form.onsubmit = function () {
    search();
}

还是会出现表单提交，后端无法处理的情况
这是，只要将最后的onsubmit函数更改为如下

form.onsubmit = function () {
    return search();
}

更好的解决办法

随着JS的一次次改变，我们更推荐使用addEventListener来取代on事件绑定 在这个过程中发现了一个问题

form.addEventListener('submit',function () {
    return search();
});

这样并没由阻止表单的提交，这是为什么呢？
原因是当我们使用on进行事件绑定的时候，会发生覆盖
比如说

form.onsubmit = function () {
    console.log("hello");
}

form.onsubmit = function () {
    console.log("world");
}

这个时候，在提交的时候只会显示world，而addEventListener没有这个效果，所以，我们要组织默认的事件

form.addEventListener('submit',function (event) {
    event.preventDefault();
    return search();
});

更好的写法是，

form.addEventListener('submit', (event) => { 
	if (!search()) event.preventDefault() 
})