从入门表单到熟练数据录入是最为常见的应用了，表单在数据应用中起到了直观重要的作用。由 form 元素包裹的区域就是表单

数据录入是最为常见的应用了，表单在数据应用中起到了直观重要的作用。

表单

通用属性

autofocus (default: false) 允许您指定当页面加载时元素应该自动具有输入焦点
disabled (defalut: false) 这个布尔属性表示用户不能与元素交互
form 小部件与之相关联的表单元素
name 元素的名称;这是跟表单数据一起提交的
value 初始值

表单域

由 form 元素包裹的区域就是表单域。一下元素元素被视为表单元素

<form> 表单域
<fieldset> 控件组
<legend> 表单说明
<input> 输入框
<textarea> 文本输入框
<select> 下拉框
select/optgroup 内嵌<option> 下拉框选项
select 内嵌 <optgroup> 下拉框选项分组
datalist是自动补全（一般和 input 以前使用）
<button> 表单按钮 reset, submit, button
<object>
<output>

textarea 基本属性

cols 平均字符宽度。
rows 文本行数
wrap 装文本, hard / soft

multiple 多选框

select 属性：multiple

<select multiple id="multi" name="multi">
  <option>11</option>
  <option>22</option>
  <option>33</option>
</select>

自动补全

datalist （datalist 是载体）
input (具有 list 属性，通过 list 与 datalist 的 id 进行绑定)
label （标签）
option （datalist 的选项）

<label for="abc">?</label>
<input type="text" name="myFruit" id="abc" list="list">
<datalist id="list">
  <option>Apple</option>
  <option>Banana</option>
  <option>Blackberry</option>
  <option>Blueberry</option>
  <option>Lemon</option>
  <option>Lychee</option>
  <option>Peach</option>
  <option>Pear</option>
</datalist>

表单域中的表单元素

label 标签元素（输入元素的说明，增加可点击区域）
input 输入元素
- type="radio" 单选
- type="checkbox" 多选
- type="submit" 提交按钮
- type="reset" 重置按钮
- type="button" 普通按钮

示例

<!--同级， 兄弟元素-->
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">

<!--嵌套， 父子关系-->
<label for="name">
  Name: <input type="text" id="name" name="user_name">
</label>

label 增加可点击区域

<form>
  <p>
    <label for="taste_1">I like cherry</label>
    <input type="checkbox" id="taste_1" name="taste_cherry" value="1">
  </p>
  <p>
    <label for="taste_2">I like banana</label>
    <input type="checkbox" id="taste_2" name="taste_banana" value="2">
  </p>
</form>

表单对象

在浏览器环境中存在 FormData 对象.

var formdata = new FormData()

console.log(formdata)

从 formdata 我们知道 formdata 实例上是有许多原型方法的：

append
delete
entries
forEach
get
getAll
has
keys
set
values
constructor
Symbol(Symbol.iterator)
Symbol(Symbol.toStringTag)

formdata.append('a', 'this is a')
formdata.append('b', 'this is b')

formdata.get('a')
formdata.getAll()

formdata.delete('a')
formdata.delete('b')

formdata.has('a')

FormData 与后端交互

vue 中表单数据与后台交互


<template>
  <div class="from_field">
    <form action="">
      <input type="text"  placeholder="姓名" v-model="formFiledData.name">
      <input type="password" placeholder="密码" v-model="formFiledData.password">
      <input type="text" placeholder="手机号" v-model="formFiledData.phone">
    </form>
    <button class="btn" @click="onSubmit()">提交</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "from",
  data() {
    return {
      formFiledData: {
        name: '',
        password: '',
        phone: ''
      }
    };
  },
  methods: {
    onSubmit() {
      /* json */
      // let formData = JSON.stringify(this.formFiledData);

      /* formData格式提交： */
      let formData = new FormData();
      let key;

      for(key in this.formFiledData){
        formData.append(key, this.formFiledData[key]);
      }

      axios({
        method:"post",
        url:"xxxxxxx",
        headers: {
          // "Content-Type": "application/x-www-form-unlencoded"
          "Content-Type": "multipart/form-data"
        },
        withCredentials:true,
        data:formData
      }).then((res)=>{
            console.log(res);
      });
    }
  }
};

表单验证

用于在发送数据到服务器之前，前端对表单进行验证.

原生 JavaScript 获取表单数据

<form name="formName" action="/" onsubmit="validateForm" method="post">
      姓:
  <input type="text" name="inputName" />
  <input type="submit" value="提交" />
</form>

function validateForm() {
  var inputName = document.forms["formName"]["inputName"].value;
  if(inputName == null || inputName == '') {
    alert('必须填写内容...')
    return false
  }
}

jQuery 表单验证

jqueryValidation

引入了 jqueryvalidation 的 jQuery 对象多了一个验证方法 validate, 我们可以直接进行验证

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    // your form code
  </fieldset>
</form>
<script>
$("#commentForm").validate();
</script>

当然 jqueryvalidation 也允许我们自定义验证规则 rules 和提示信息 message

$("#commentForm").validate({
  rules: {
    lastname: "required",
    username: {
      required: true,
      minlength: 2
    },
  },
  message: {
    username: {
      required: "请输入用户名",
      minlength: "用户名必需由两个字符组成"
    },
  }
});

这里只是抛砖引玉，不可能把 jqueryvalidation 中所有的使用方式，都介绍出来。

Vue 中简单的表单验证

Vue 中由于可以使用双向数据绑定，Vue 中的表单数据始终是直接可控制的，我们只需要监听提交时间即可。

<template>
  <div class="validate-require">
    <form action="" name="otherForm" @submit="validateOtherForm">
      <div>
        <label for="title">文章标题</label>
        <input type="text" v-model="otherFormData.title" id="title" />
        <input type="submit" value="提交">
      </div>
    </form>
  </div>
</template>
<script>
export default {
  name: "RequireForm",
  data() {
    return {
      otherFormData: {
        title: ''
      }
    }
  },
  methods: {
    validateOtherForm (el) {
      if (this.validateForm.title === '') {
        alert('不能为空')
        return false
      } else {
        alert('通过...')
        return true
      }
    }
  }
};
</script>

Vue 中表单验证

element-ui 采用 async-validator 进行表单验证

React 当中的表单

由于 React 中有状态 state 的概念，React 当中的表单是通过 state 来控制的，这和 Vue 中一样符合数据驱动的编程体验。

一个使用了 React hook 的简单例子

import React, { useState } from 'react';

function NameForm(props) {
  const [val, setValue] = useState({value: 0});

  function handleChange(e) {
    setValue({value: e.target.value})
  }

  function handleSubmit(e) {
    alert('提交的名字: ' + val);
    event.preventDefault();
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>名字:</label>
      <input type="text" value={val} onChange={handleChange} />
      <input type="submit" value="提交" />
    </form>
  )
}

React 的表单验证

各个 UI 框架之中的表单

Antd
Materail-UI
Element
Vuetify
IView

从入门表单到熟练

表单