原生表单到UI库封装的表单

一、初识表单

1. 表单：用来收集用户提交的数据，发送到服务器。
2. 提交形式： key1=value1&key2=value2 ，浏览器自动完成
3. 提交方式：

• submit控件：<input type="submit" value="提交">
• Enter键： 在 input 字段中按下Enter 键
• button元素：<button>提交</button>,默认有type="submit"
• 表单元素脚本提交:formElement.submit();

4. 阻止提交： event.preventDefault()

5. 表单事件：

• 更新输入框内容触发：onchange 与 oninput

• 复制，剪切和粘切触发：oncopy，oncut，与onpaste。

  配合event.clipboardData.getData('text/plain')和event.clipboardData.setData('text/plain',value)

• 表单校验失败事件：oninvalid

二、模拟表单

1. 模拟什么？表单数据以键值对的形式向服务器发送由浏览器自动完成的过程

2. 实现思路：

• 构造和编辑表单键值对：FormData对象（new FormData()）
• 发送服务器：XMLHttpRequest.send()

三、表单校验

// 未通过验证invalid
input:invalid {
  border-color: red;
}
// 通过验证valid 
input,
input:valid {
  border-color: #ccc;
}

1. 手动触发表单的校验：checkValidity()
2. 是否会在提交时进行校验: willValidate
3. 控件不满足校验条件时，浏览器显示的提示文本: validationMessage
4. 定制校验失败时的报错信息: setCustomValidity()

四、表单编码格式

1. 表单能够用四种编码，向服务器发送数据，编码格式由表单的enctype属性决定

2. get方法（表单数据作为 URL 的查询字符串发送）,enctype无效

3. post方法（表单数据作为 HTTP 数据体发送）

• application/x-www-form-urlencoded （默认方式）
• text/plain （纯文本格式）
• multipart/form-data （文件上传的格式）

五、对齐UI库

1. Modal 的确认按钮在 Form 之外，通过 form.submit 方法调用表单提交功能。

2. reset同上。

⚠️注意：按钮上写 name和value也会被提交。