表单脚本.md

表单脚本

---

• 基础知识
  • HTMLFormElement 特有属性
  • 共有的表单字段属性
  • 共有的表单字段方法
  • 共有的表单字段事件
• 表单序列化
• 富文本编辑
• 实例

基础知识

在 HTML 中，表单是由 <form> 元素来表示的，而在 js 中，表单对应的元素类型是 HTMLFormElement 类型，HTMLFormElement 继承了 HTMLElement，所以除了与其他 html 元素具有的相同属性之外还拥有以下属性。

HTMLFormElement 特有属性

1. action: 接受请求的 URL，等价于 html 中的 action 特性
2. method： 要发送的 http 请求的类型，通常是get或者post，等价于 html 中的 method 特性
3. name：表单的名称，等价于 html 中的 name 属性
4. target: 用于发送请求和接收响应的窗口的名称，等价于 html 中的 target 属性
5. acceptCharset: 服务器能够处理的字符集，等价于 HTML 中的 accept-charset
6. enctype： 请求的编码类型，等价于 html 中的 enctype
7. length：表单中控件的数量
8. submit(): 提交表单
9. reset(): 将表单域重置为默认值

共有的表单字段属性

1. form：指向当前字段所属表单的指针，只读
2. name：当前字段的名称
3. type：当前字段的类型，如“checkbox”，“radio”等等
4. value：当前字段被提交给服务器的值，对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径
5. disabled:布尔值，表示当前字段是否被禁用
6. readOnly：布尔值，表示当前字段是否只读
7. tabIndex：表示当前字段的切换号

共有的表单字段方法

1. focus() 获取焦点
2. blur() 失去焦点

共有的表单字段事件

1. focus：当前字段获得焦点时触发
2. blur：当前字段失去焦点时触发
3. change：对于 input 和 textarea 元素来说，在他们是去焦点并且值改变时触发；对于 select 元素，在其选项改变时触发。

表单序列化

在浏览器中提交表单之前，浏览器是怎样将数据发送给服务器的，如下说明。

1. 对表单字段的名称和值进行 encodeURIComponent() 编码,并使用 & 进行分割
2. 不发送禁用的表单字段
3. 只发送勾选的复选框和单选按钮
4. 不发送 type 为 reset 和 button 的按钮
5. 多选框中每个选中的值单独一个条目
6. 在单击提交按钮提交表单的情况下，也会发送提交按钮，否则不会发送
7. <select> 元素的值就是选中的 <option> 元素的 value 值，如果 <option> 元素没有 value 特性则是 <option> 的文本值

富文本编辑

1. iframe 元素设置 designMode 属性 为 on
2. <div contenteditable><div>

实例

<form action="form_action.php" method="post" name="form1" accept-charset="UTF-8" enctype="text/plain">

    <input type="text" name="username" placeholder="用户名" />
    <input type="password" name="password" placeholder="密码" />

    <!-- 提交表单    js 可以直接 $form.submit() -->
    <input type="submit" value="Submit Form" />
    <input type="image" src="a.gif" />
    <button type="submit">Submit Form</button>

    <!-- 重置表单    js 可以直接 $form.reset() -->
    <input type="reset" value="Reset Form" />
    <button type="reset">Reset Form</button>

    <input type="text" name="tel" pattern="[0-9]{3}" size="3" maxlength="3" />
    <input type="text" name="tel" pattern="[0-9]{3}" size="4" maxlength="4" />
    <input type="text" name="tel" pattern="[0-9]{3}" size="4" maxlength="4" />
</form>

// 获取表单
let $form = document.forms[0];
// let $form = document.forms['form1'];    name 获取

// 获取表单字段
let fields = [].slice.call($form.elements);

// 提交前表单验证
let checkForm = () => {
  return fields
    .filter(ele => {
      return ['text', 'password'].includes(ele.type);
    })
    .every(ele => {
      return ele.value.length > 6;
    });
};
$form.addEventListener(
  'submit',
  function(event) {
    if (checkForm()) {
      // xxx 通过表单验证
    } else {
      // xxx 没通过
      event.preventDefault();
    }
  },
  false
);

// 数字输入时，屏蔽非数字键
let $tel = $form.elements['tel'];
let checkNumber = function(event) {
  if (!/\d|\./.test(event.key)) {
    event.preventDefault();
  }
};
$tel.forEach(ele => {
  ele.addEventListener('keypress', checkNumber, false);
});

// 电话号码分段输入，自动进入下一段
let tabForward = function(event) {
  if (event.target.value.length === event.target.maxLength) {
    for (let i = 0, j = $tel.length; i < j; i++) {
      if (event.target === $tel[i] && $tel[i + 1]) {
        $tel[i + 1].focus();
        return;
      }
    }
  }
};
$tel.forEach(ele => {
  ele.addEventListener('keyup', tabForward, false);
});