如何手动控制form表单是否提交?

1,200 阅读2分钟

前情提要:

我在一个项目代码里用到了form表单来向百度发送请求,

image.png

但我遇到了一个问题,当输入框内啥都没写的时候,我点击搜索还是会跳转到百度界面。
本篇文章的目的就是:如何实现当用户没有输入内容却点击搜索时进行警告且不跳转??

image.png

炮火准备:

先复习下form表单各个参数的功能,搞清楚一些基本概念
action: 控制请求往哪个页面发?
method:控制请求的方式
onsubmit: 当form表单被提交时就会触发这个事件。

Q:怎么才能让表单被提交?
A:下面两个情况会让浏览器会自动触发onsubmit事件。
1:当你form标签中包含了一个button按钮然后你点击它,
2:或者一个type为submit的input你在输入完成后按下回车键时,

form标签里的onsubmit有两种情况:

onsubmit="return false"
onsubmit="return true"

return在这里的作用就是将后面所接的布尔值再向上返回给浏览器。浏览器如果接收到onsubmit返回的是false,则阻止表单提交。反之,如果接收到的是true,表单就会提交到action属性所指向的页面

开始进攻(具体解决)

1:完成JS代码函数的定义

image.png

函数中,searchInput是我给输入框标签定义的ID名。此函数的逻辑就是,当我们提交表单时,检查下我的输入框内到底有没有内容? 如果没有就发出警告,返回false,否则就返回true。

2:这函数咋用呢

image.png

给form标签加上箭头所指的代码,返回上一步定义的函数返回值。至于为何要加return? 请你看看 炮火准备阶段的解释~


以上,就是如何手动控制form表单是否提交的解决方法了,至于为何用document这种方法去获取并设置,主要是我尝试了很多方法之后,发现这种方法比较稳妥,在yarn build把代码打包好后功能不会失灵。

如果你按照上面的方法写了还是不行,你或许可以将这个script代码直接写到HTML里,不放到js文件里试下??