这是我参与8月更文挑战的第29天,活动详情查看:8月更文挑战
我们应该知道JavaScript设计的的初衷很大程度上是为了处理表单验证,因为在那个远古时代表单验证是通过后台来验证的,网速都比较慢,我们向后台发送数据都需要很长时间才能接收返回数据,动则几分钟少则几十秒,用户体验极其不佳。JavaScript在设计在网页校验,直接就能告诉用户结果,它还增加了很多表单控件的默认行为,这直接让这门语言火了起来。
表单在html中以<form>标签元素展示,在js中它用HTMLFormElemnt类型表示。
介绍一下HTMLFormElement类型的属性和方法。
只要有表单就肯定会有提交表单,提交表单的方法我们上面也有,就是submit方法。 一般我们都会写一个button按钮,给他设定type值为提交。
<form action="./form.html" method="get" >
<input type="text" value="">
<button type="submit">提交</button>
</form>
preventDefault()方法就是阻止表单提交,
const form = document.getElementById("form");
form.addEventListener("submit", (event) => {
event.preventDefault();
console.log('阻止成功');//阻止成功
})
一般我们使用场景就是在提交且不跳转页面的时候,用户点击提交后其实是给服务器发送了表单,但是我们防止用户二次提交,会在提交后执行这个方法,阻止之后的提交。还有一种方法就是直接禁用提交按钮,给它设置一个disabled属性。
前面提到disabled属性,这个就是禁用。我们看一下表单里面都有什么公共属性。
我们可以根据需求在js中操作这些内容,反正我感觉是挺好玩的。现在好多开源的ui库,大家可以配套使用。