表单事件

@Form

表单默认事件

.默认情况下，表单提交时，页面会发生跳转；类似的还有 <a>

.有时候需要阻止该默认行为

form.addEventListener('submit', (e) => {
  e.preventDefault();
})

或

form.addEventListener('submit', () => {
  return false;
})

获取表单数据

.数据提交后交给后端获取并处理

.前端如果需要获取数据，需要特别处理

1. 单个元素

input.addEventListener('change', () => {
  console.log(input.value);
})

2. 利用表单提交事件获取所有元素值

<form action="https://www.baidu.com" method="get" name="demo">
  <input type="text" name="uname" id="uname">
  <input type="password" name="upass" id="upass">
  <input type="submit" value="submit">
  <input type="reset" value="reset">
</form>

.如果表单元素指定了 id，不获取元素也可以访问其值

const form = document.querySelector('form')
form.addEventListener('submit', (e) => {
  e.preventDefault()
  // ...
  // 查看提交的数据
  console.log(uname.value, upass.value);
})

.如果需要修改或者追加，需要使用 form 构造的 FormData 集中获取

FormData

FormData() 构造函数

FormData(form)：在表单的提交事件中构造数据

FormData(form, submitter)：表单提交时，自动构造

.更多信息，请访问 MDN - FormData、MDN - formdata_event

formdata 事件

数据构造完毕时，会触发 formdata 事件

可以根据需要增加、修改或验证某些数据

也可以直接在提交事件中处理数据

常用方法

item	desc
FormData.append(name, value)	添加一个值对
FormData.delete(name)	删除指定的 key 对应的值对
FormData.set(name)	修改值对 key 的值 value
FormData.get(name)	获取属性第一个值
FormData.getAll(name)	获取所有值，返回的是一个数组
FormData.has(name)	是否有一个指定 key 的值对
FormData.keys()	迭代器对象 iterator；所有的 key
FormData.values()	迭代器对象 iterator；所有的值 value
FormData.entries()	迭代器对象 iterator；所有的 key 和所有的值 value

对于迭代器对象 iterator，可以使用数组方法 Array.from 或 for-of 遍历访问

FormData 本身也是值对，同样可以迭代遍历

[]console.log(formdata) 打印出来的结果始终为 FormData {} 它有一个隐藏域：所有的操作对象的方法全部是在它的原型中

[] 获取表单数据 - 提交时构造数据；数据构造完毕后，提取数据；如果提交后，马上获取，有可能数据还未构造完毕，导致失败

1. 获取提交的数据

const form = document.querySelector('form')
form.addEventListener('submit', e => {
  e.preventDefault()
  let formData = new FormData(form)
  console.log('formData', formData);
  console.log('formdata', Array.from(formData));
  console.log('formdata', Array.from(formData.keys()));
  console.log('uname', formData.get('uname'));/* 获取数据 */
})

2. 修改提交的数据

form.addEventListener('submit', e => {
  e.preventDefault()
  let formData = new FormData(form)
  console.log('formdata 1', Array.from(formData));
  formData.set('uname', 'glpla.github.io')/* 修改数据 */
  console.log('formdata 2', Array.from(formData));

})

3. 追加数据

form.addEventListener('submit', e => {
  e.preventDefault()
  let formData = new FormData(form)
  console.log('formdata 1', Array.from(formData));
  formData.set('ugender', 'male')/* 追加数据 */
  console.log('formdata 2', Array.from(formData));
})

4. 删除数据

form.addEventListener('submit', e => {
  e.preventDefault()
  let formData = new FormData(form)
  console.log('formdata 1', Array.from(formData));
  formData.delete('umsg')/* 删除数据 */
  console.log('formdata 2', Array.from(formData));
})

Message me