表单元素及表单事件
16lz
2021-10-04
表单元素及表单事件
表单元素可以通过document.forms获取表单集合,后边跟一个表单的id值,选定具体表单,也可以使用下标。
表单有默认的提交行为,可以在表单元素中加入onsubmit=”return false”,设置submit属性,取消器提交行为,也可以在javascipt代码中使用preventDefault()函数取消提交行为。
- html
<!-- onsubmit="return false" 禁用表单默认提交行为-->
<form id="register" action="" onsubmit="return false">
<div>
<label for="username">用户名:</label>
<input
type="text"
name="username"
placeholder="用户名不能少于6位字符"
required
/>
</div>
<button>注册</button>
</form>
- javascript
// 表单选择器
const form = document.forms.register;
console.log(form.username.value);
const btn = document.querySelector("button");
// 监听事件
btn.addEventListener("click", ($) => {
// 表单元素可以通过元素的name属性获取
//用户名长度
let len = form.username.value.length;
if (len < 6) {
alert("用户名少于8位");
return false;
}
});
更多相关文章
- iframe获取子级和父级元素
- Emmet
- php操作redis命令及代码实例大全
- HTML常用元素样式、定位学习与应用
- CSS伪类选择器、box-sizing属性、常用单位、媒体查询
- 1. 实例演示解构赋值,特别是函数参数中使用解构的方式2. dom元素
- 原生Js增删改查及解构赋值
- JavaScript实现留言板添加删除留言
- box-sizing、伪类选择器参数及媒体查询的应用