当我们需要对表单数据进行上送时,经常会使用一些dom操作获取每个input的内容。例如:
<form name="register">
<p>
爱好:<input type="checkbox" name="fav[]" value="读书"> 读书、
<input type="checkbox" name="fav[]" value="音乐">音乐、
<input type="checkbox" name="fav[]" value="体育">体育
</p>
<p>
<!--普通按钮-->
<input type="button" name="commit" value="立即注册">
</p>
</form>
为了获取多选框的值,我们就需要对这个dom进行循环操作
var favObjs = document.register['fav'],
btn = document.querySelector('input[type="button"]'),
favs = [];
btn.onclick = function () {
favObjs.forEach(function (item, index) {
if (item.checked) {
favs.push(item.value);
}
});
favs = Array.from(new Set(favs));//Set是一种去重的方法
console.log(favs)
}
如此就有点麻烦了。
为了快速且简便的对表单信息进行操作,ES6引入了一个FormData对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h4>
新用户注册
</h4>
<form name="register">
<p>
账号:<input type="text" name="uname" value="" />
</p>
<p>
密码:<input type="password" name="usrpwd" value="" />
</p>
<p>
性别:<input type="radio" name="gender" value="男" /> 男、
<input type="radio" name="gender" value="女" />女
</p>
<p>
爱好:<input type="checkbox" name="fav[]" value="读书"> 读书、
<input type="checkbox" name="fav[]" value="音乐">音乐、
<input type="checkbox" name="fav[]" value="体育">体育
</p>
<p>
<!--普通按钮-->
<input type="button" name="commit" value="立即注册">
</p>
</form>
<script>
// 如果使用FormData 往往不需要使用submit按钮,普通按钮点击验证即可
var button = document.register.commit;
button.onclick = function () {
// 获取表单输入控件的值,包含了文本框、单选框、多选框,为了方便 可以使用FormData来操作
document.register; // dom对象 是dom结构的对象 不是普通的数据对象
// 使用FormData将表单dom对象转成表单数据对象
/************ 重点**************/
fd = new FormData(document.register); //为了F12能动态演示,因此将fd定义为全局变量
console.dir(fd); // {}
// 它不直接暴露数据,而是提供接口来获取
var uname = fd.get('uname'),
usrpwd = fd.get('usrpwd'),
gender = fd.get('gender'),
favs = fd.getAll('fav[]');
// console.log(uname, usrpwd, gender, favs);
/************ 重点**************/
var msg = '';
if (/^\s*$/.test(uname)) { // '' ' '
msg += '账号未填写\n';
}
if (!/^\w{8,15}$/.test(usrpwd)) {
msg += '密码长度不符合要求\n'
}
if (!gender) {
msg += '性别未选择\n'
}
if (favs.length == 0) {
msg += '爱好未选择'
}
if (msg) {
alert(msg);
return false;
} else {
// location.href = 'http://localhost';
}
}
</script>
</body>
</html>
FormData它不直接暴露数据,而是提供接口来获取,例如:使用get(name)或getAll(name)的方法可以获取我们需要的参数数据。
至此,ES6的FormData的基本方法方法就介绍完了。