点此查看 所有教程、项目、源码导航
文章目录
- [1. 背景](#1. 背景)
- [2. 文本输入框 input:text、textarea](#2. 文本输入框 input:text、textarea)
- [3. 单选框 radio](#3. 单选框 radio)
- [4. 复选框 checkbox](#4. 复选框 checkbox)
- [5. 下拉选择框 select](#5. 下拉选择框 select)
- [6. 禁用表单元素 disabled](#6. 禁用表单元素 disabled)
- [7. 基础表单验证：非空、长度、邮箱格式](#7. 基础表单验证：非空、长度、邮箱格式)
- [8. 小结](#8. 小结)
1. 背景
前面我们学习了 DOM 节点增删改查，能够动态创建页面元素。
网页中经常会遇到表单，比如登录框、搜索框、单选、多选、下拉选择。表单是网页和用户交互非常重要的载体。
用户输入的内容不一定是符合要求的，所以我们还需要做表单验证，判断输入是否合法。
本篇我们专门学习表单元素的 DOM 操作，读取用户输入、设置默认值、判断选中状态，同时学习基础的表单验证。
2. 文本输入框 input:text、textarea
普通文本框、多行文本框，读写内容依靠 value 属性，这是表单最核心的属性。
语法：
js
// 获取输入的值
var 内容 = 表单元素.value;
// 设置输入框的值
表单元素.value = "要填充的内容";示例 HTML：
html
<input type="text" id="username" placeholder="请输入用户名">
<textarea id="desc"></textarea>示例 JS 代码：
js
var username = document.querySelector("#username");
var desc = document.querySelector("#desc");
// 读取输入内容
console.log(username.value);
console.log(desc.value);
// 给输入框设置默认文字
username.value = "张三";
desc.value = "一段描述文字";重点说明：
- 不要用
innerText、innerHTML去读写输入框内容，不生效； - value 拿到的是字符串，如果用户什么都没输入，拿到空字符串
""； - placeholder 只是提示文字，不会进入 value，用户输入后才会有值。
3. 单选框 radio
单选框同一组只能选一个，通过 checked 属性判断是否选中，它是布尔类型 true / false。
示例 HTML：
html
<input type="radio" name="sex" value="male" id="male">男
<input type="radio" name="sex" value="female" id="female">女示例 JS 代码：
js
var male = document.querySelector("#male");
var female = document.querySelector("#female");
console.log(male.checked);
// 设置选中
male.checked = true;重点说明：
- name 相同的单选框会归为一组；
- checked 是布尔值，不是字符串；
- value 用来保存这个选项代表的数据，选中时我们读取 value。
4. 复选框 checkbox
复选框可以多选，同样使用 checked 判断选中状态。
示例 HTML：
html
<input type="checkbox" value="basketball" id="basket">篮球
<input type="checkbox" value="music" id="music">音乐示例 JS 代码：
js
var basket = document.querySelector("#basket");
var music = document.querySelector("#music");
console.log(basket.checked);
// 设置选中
basket.checked = true;
// 取消选中
music.checked = false;重点说明：
- 复选框互相独立，需要单独判断每一个的 checked；
- 开发中经常循环一组复选框，收集所有选中项的 value。
5. 下拉选择框 select
下拉框 select，它的子元素是 option。
select 有 value，直接拿到当前选中 option 的 value。
示例 HTML：
html
<select id="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>示例 JS 代码：
js
var city = document.querySelector("#city");
// 获取选中的值
console.log(city.value);
// 代码设置选中
city.value = "shanghai";重点说明：
- 给 select 的 value 赋值，会自动选中对应 value 的 option；
- 如果 option 没有写 value，会取 option 内部的文本。
6. 禁用表单元素 disabled
所有表单元素都支持 disabled 属性，布尔类型，设置为 true 之后元素无法点击、不能输入。
js
var username = document.querySelector("#username");
// 禁用
username.disabled = true;
// 启用
username.disabled = false;7. 基础表单验证：非空、长度、邮箱格式
拿到用户输入之后，我们需要校验内容是否符合规则，这里把验证逻辑封装成一个函数，包含三种最常用的验证：非空校验、长度校验。
我们使用 onclick 点击事件，这个事件机制马上下一篇会讲到，此处简单理解，点击button按钮会触发checkForm()函数执行即可。
示例 HTML：
html
<input type="text" id="username" placeholder="用户名">
<button onclick="checkForm()">提交校验</button>示例 JS 代码：
js
// 表单验证函数
function checkForm() {
var username = document.querySelector("#username");
var nameVal = username.value.trim(); // trim() 去掉首尾空格
// 1. 非空验证
if (nameVal === "") {
alert("用户名不能为空");
return;
}
// 2. 长度验证：用户名长度 3~10 位
if (nameVal.length < 3 || nameVal.length > 10) {
alert("用户名长度必须在3~10位之间");
return;
}
alert("全部验证通过！");
}重点说明：
trim()用来去除输入内容首尾的空格，防止用户只输入空格蒙混过关；length属性可以获取字符串长度；- 校验不通过使用
return直接终止函数里面后续代码执行。
8. 小结
- 文本框、textarea、select 使用
value读写内容； - radio、checkbox 使用
checked判断选中状态，布尔值； disabled控制表单是否禁用；- 不要用 innerText 操作输入框内容；
- 常用表单验证封装在函数内：非空判断、长度判断、邮箱正则校验。