ElementPlus Form 表單

2021-09-24 21:23 更新

Form 表單

由輸入框、選擇器、單選框、多選框等控件組成，用以收集、校驗(yàn)、提交數(shù)據(jù)
組件升級(jí)采用了 flex 布局，以替代舊版本的 float 布局。

典型表單

包括各種表單項(xiàng)，比如輸入框、選擇器、開關(guān)、單選框、多選框等。


在 Form 組件中，每一個(gè)表單域由一個(gè) Form-Item 組件構(gòu)成，表單域中可以放置各種類型的表單控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker

<template>
  <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活動(dòng)名稱">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活動(dòng)區(qū)域">
    <el-select v-model="form.region" placeholder="請選擇活動(dòng)區(qū)域">
      <el-option label="區(qū)域一" value="shanghai"></el-option>
      <el-option label="區(qū)域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活動(dòng)時(shí)間">
    <el-col :span="11">
      <el-date-picker
        type="date"
        placeholder="選擇日期"
        v-model="form.date1"
        style="width: 100%;"
      ></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker
        placeholder="選擇時(shí)間"
        v-model="form.date2"xx`
        style="width: 100%;"
      ></el-time-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="即時(shí)配送">
    <el-switch v-model="form.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活動(dòng)性質(zhì)">
    <el-checkbox-group v-model="form.type">
      <el-checkbox label="美食/餐廳線上活動(dòng)" name="type"></el-checkbox>
      <el-checkbox label="地推活動(dòng)" name="type"></el-checkbox>
      <el-checkbox label="線下主題活動(dòng)" name="type"></el-checkbox>
      <el-checkbox label="單純品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊資源">
    <el-radio-group v-model="form.resource">
      <el-radio label="線上品牌商贊助"></el-radio>
      <el-radio label="線下場地免費(fèi)"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活動(dòng)形式">
    <el-input type="textarea" v-model="form.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即創(chuàng)建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
        },
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!')
      },
    },
  }
</script>

W3C 標(biāo)準(zhǔn)中有如下規(guī)定

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

即：當(dāng)一個(gè) form 元素中只有一個(gè)輸入框時(shí)，在該輸入框中按下回車應(yīng)提交該表單。如果希望阻止這一默認(rèn)行為，可以在 <el-form> 標(biāo)簽上添加 @submit.prevent。

行內(nèi)表單

當(dāng)垂直方向空間受限且表單較簡單時(shí)，可以在一行內(nèi)放置表單。


設(shè)置 inline 屬性可以讓表單域變?yōu)樾袃?nèi)的表單域

<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="審批人">
    <el-input v-model="formInline.user" placeholder="審批人"></el-input>
  </el-form-item>
  <el-form-item label="活動(dòng)區(qū)域">
    <el-select v-model="formInline.region" placeholder="活動(dòng)區(qū)域">
      <el-option label="區(qū)域一" value="shanghai"></el-option>
      <el-option label="區(qū)域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查詢</el-button>
  </el-form-item>
</el-form>
</template>

<script>
  export default {
    data() {
      return {
        formInline: {
          user: '',
          region: '',
        },
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!')
      },
    },
  }
</script>

對(duì)齊方式

根據(jù)具體目標(biāo)和制約因素，選擇最佳的標(biāo)簽對(duì)齊方式。


通過設(shè)置 label-position 屬性可以改變表單域標(biāo)簽的位置，可選值為 top、left，當(dāng)設(shè)為 top 時(shí)標(biāo)簽會(huì)置于表單域的頂部

<template>
  <el-radio-group v-model="labelPosition" size="small">
  <el-radio-button label="left">左對(duì)齊</el-radio-button>
  <el-radio-button label="right">右對(duì)齊</el-radio-button>
  <el-radio-button label="top">頂部對(duì)齊</el-radio-button>
</el-radio-group>
<div style="margin: 20px;"></div>
<el-form
  :label-position="labelPosition"
  label-width="80px"
  :model="formLabelAlign"
>
  <el-form-item label="名稱">
    <el-input v-model="formLabelAlign.name"></el-input>
  </el-form-item>
  <el-form-item label="活動(dòng)區(qū)域">
    <el-input v-model="formLabelAlign.region"></el-input>
  </el-form-item>
  <el-form-item label="活動(dòng)形式">
    <el-input v-model="formLabelAlign.type"></el-input>
  </el-form-item>
</el-form>
</template>

<script>
  export default {
    data() {
      return {
        labelPosition: 'right',
        formLabelAlign: {
          name: '',
          region: '',
          type: '',
        },
      }
    },
  }
</script>

表單驗(yàn)證

在防止用戶犯錯(cuò)的前提下，盡可能讓用戶更早地發(fā)現(xiàn)并糾正錯(cuò)誤。


Form 組件提供了表單驗(yàn)證的功能，只需要通過 rules 屬性傳入約定的驗(yàn)證規(guī)則，并將 Form-Item 的 prop 屬性設(shè)置為需校驗(yàn)的字段名即可。校驗(yàn)規(guī)則見 async-validator

<template>
  <el-form
  :model="ruleForm"
  :rules="rules"
  ref="ruleForm"
  label-width="100px"
  class="demo-ruleForm"
>
  <el-form-item label="活動(dòng)名稱" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="活動(dòng)區(qū)域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="請選擇活動(dòng)區(qū)域">
      <el-option label="區(qū)域一" value="shanghai"></el-option>
      <el-option label="區(qū)域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活動(dòng)時(shí)間" required>
    <el-col :span="11">
      <el-form-item prop="date1">
        <el-date-picker
          type="date"
          placeholder="選擇日期"
          v-model="ruleForm.date1"
          style="width: 100%;"
        ></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-form-item prop="date2">
        <el-time-picker
          placeholder="選擇時(shí)間"
          v-model="ruleForm.date2"
          style="width: 100%;"
        ></el-time-picker>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="即時(shí)配送" prop="delivery">
    <el-switch v-model="ruleForm.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活動(dòng)性質(zhì)" prop="type">
    <el-checkbox-group v-model="ruleForm.type">
      <el-checkbox label="美食/餐廳線上活動(dòng)" name="type"></el-checkbox>
      <el-checkbox label="地推活動(dòng)" name="type"></el-checkbox>
      <el-checkbox label="線下主題活動(dòng)" name="type"></el-checkbox>
      <el-checkbox label="單純品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊資源" prop="resource">
    <el-radio-group v-model="ruleForm.resource">
      <el-radio label="線上品牌商贊助"></el-radio>
      <el-radio label="線下場地免費(fèi)"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活動(dòng)形式" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')"
      >立即創(chuàng)建</el-button
    >
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
</template>

<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
        },
        rules: {
          name: [
            { required: true, message: '請輸入活動(dòng)名稱', trigger: 'blur' },
            {
              min: 3,
              max: 5,
              message: '長度在 3 到 5 個(gè)字符',
              trigger: 'blur',
            },
          ],
          region: [
            { required: true, message: '請選擇活動(dòng)區(qū)域', trigger: 'change' },
          ],
          date1: [
            {
              type: 'date',
              required: true,
              message: '請選擇日期',
              trigger: 'change',
            },
          ],
          date2: [
            {
              type: 'date',
              required: true,
              message: '請選擇時(shí)間',
              trigger: 'change',
            },
          ],
          type: [
            {
              type: 'array',
              required: true,
              message: '請至少選擇一個(gè)活動(dòng)性質(zhì)',
              trigger: 'change',
            },
          ],
          resource: [
            { required: true, message: '請選擇活動(dòng)資源', trigger: 'change' },
          ],
          desc: [
            { required: true, message: '請?zhí)顚懟顒?dòng)形式', trigger: 'blur' },
          ],
        },
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
    },
  }
</script>

自定義校驗(yàn)規(guī)則

這個(gè)例子中展示了如何使用自定義驗(yàn)證規(guī)則來完成密碼的二次驗(yàn)證。


本例還使用status-icon屬性為輸入框添加了表示校驗(yàn)結(jié)果的反饋圖標(biāo)。

<template>
  <el-form
  :model="ruleForm"
  status-icon
  :rules="rules"
  ref="ruleForm"
  label-width="100px"
  class="demo-ruleForm"
>
  <el-form-item label="密碼" prop="pass">
    <el-input
      type="password"
      v-model="ruleForm.pass"
      autocomplete="off"
    ></el-input>
  </el-form-item>
  <el-form-item label="確認(rèn)密碼" prop="checkPass">
    <el-input
      type="password"
      v-model="ruleForm.checkPass"
      autocomplete="off"
    ></el-input>
  </el-form-item>
  <el-form-item label="年齡" prop="age">
    <el-input v-model.number="ruleForm.age"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
</template>

<script>
  export default {
    data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年齡不能為空'))
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('請輸入數(shù)字值'))
          } else {
            if (value < 18) {
              callback(new Error('必須年滿18歲'))
            } else {
              callback()
            }
          }
        }, 1000)
      }
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('請輸入密碼'))
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass')
          }
          callback()
        }
      }
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('請?jiān)俅屋斎朊艽a'))
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('兩次輸入密碼不一致!'))
        } else {
          callback()
        }
      }
      return {
        ruleForm: {
          pass: '',
          checkPass: '',
          age: '',
        },
        rules: {
          pass: [{ validator: validatePass, trigger: 'blur' }],
          checkPass: [{ validator: validatePass2, trigger: 'blur' }],
          age: [{ validator: checkAge, trigger: 'blur' }],
        },
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
    },
  }
</script>

 自定義校驗(yàn) callback 必須被調(diào)用。 更多高級(jí)用法可參考 async-validator。

動(dòng)態(tài)增減表單項(xiàng)

 

除了在 Form 組件上一次性傳遞所有的驗(yàn)證規(guī)則外還可以在單個(gè)的表單域上傳遞屬性的驗(yàn)證規(guī)則

<template>
  <el-form
  :model="dynamicValidateForm"
  ref="dynamicValidateForm"
  label-width="100px"
  class="demo-dynamic"
>
  <el-form-item
    prop="email"
    label="郵箱"
    :rules="[
      { required: true, message: '請輸入郵箱地址', trigger: 'blur' },
      { type: 'email', message: '請輸入正確的郵箱地址', trigger: ['blur', 'change'] }
    ]"
  >
    <el-input v-model="dynamicValidateForm.email"></el-input>
  </el-form-item>
  <el-form-item
    v-for="(domain, index) in dynamicValidateForm.domains"
    :label="'域名' + index"
    :key="domain.key"
    :prop="'domains.' + index + '.value'"
    :rules="{
      required: true, message: '域名不能為空', trigger: 'blur'
    }"
  >
    <el-input v-model="domain.value"></el-input
    ><el-button @click.prevent="removeDomain(domain)">刪除</el-button>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('dynamicValidateForm')"
      >提交</el-button
    >
    <el-button @click="addDomain">新增域名</el-button>
    <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
  </el-form-item>
</el-form>
</template>

<script>
  export default {
    data() {
      return {
        dynamicValidateForm: {
          domains: [
            {
              value: '',
            },
          ],
          email: '',
        },
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
      addDomain() {
        this.dynamicValidateForm.domains.push({
          value: '',
          key: Date.now(),
        })
      },
    },
  }
</script>

數(shù)字類型驗(yàn)證

 

數(shù)字類型的驗(yàn)證需要在 v-model 處加上 .number 的修飾符，這是 Vue 自身提供的用于將綁定值轉(zhuǎn)化為 number 類型的修飾符。

<template>
  <el-form
  :model="numberValidateForm"
  ref="numberValidateForm"
  label-width="100px"
  class="demo-ruleForm"
>
  <el-form-item
    label="年齡"
    prop="age"
    :rules="[
      { required: true, message: '年齡不能為空'},
      { type: 'number', message: '年齡必須為數(shù)字值'}
    ]"
  >
    <el-input
      type="age"
      v-model.number="numberValidateForm.age"
      autocomplete="off"
    ></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('numberValidateForm')"
      >提交</el-button
    >
    <el-button @click="resetForm('numberValidateForm')">重置</el-button>
  </el-form-item>
</el-form>
</template>

<script>
  export default {
    data() {
      return {
        numberValidateForm: {
          age: '',
        },
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
    },
  }
</script>

嵌套在 el-form-item 中的 el-form-item 標(biāo)簽寬度默認(rèn)為零，不會(huì)繼承 el-form 的 label-width。如果需要可以為其單獨(dú)設(shè)置 label-width 屬性。

表單內(nèi)組件尺寸控制

通過設(shè)置 Form 上的 size 屬性可以使該表單內(nèi)所有可調(diào)節(jié)大小的組件繼承該尺寸。Form-Item 也具有該屬性。

 

如果希望某個(gè)表單項(xiàng)或某個(gè)表單組件的尺寸不同于 Form 上的size屬性，直接為這個(gè)表單項(xiàng)或表單組件設(shè)置自己的size即可。

<template>
  <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
  <el-form-item label="活動(dòng)名稱">
    <el-input v-model="sizeForm.name"></el-input>
  </el-form-item>
  <el-form-item label="活動(dòng)區(qū)域">
    <el-select v-model="sizeForm.region" placeholder="請選擇活動(dòng)區(qū)域">
      <el-option label="區(qū)域一" value="shanghai"></el-option>
      <el-option label="區(qū)域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活動(dòng)時(shí)間">
    <el-col :span="11">
      <el-date-picker
        type="date"
        placeholder="選擇日期"
        v-model="sizeForm.date1"
        style="width: 100%;"
      ></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker
        placeholder="選擇時(shí)間"
        v-model="sizeForm.date2"
        style="width: 100%;"
      ></el-time-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="活動(dòng)性質(zhì)">
    <el-checkbox-group v-model="sizeForm.type">
      <el-checkbox-button
        label="美食/餐廳線上活動(dòng)"
        name="type"
      ></el-checkbox-button>
      <el-checkbox-button label="地推活動(dòng)" name="type"></el-checkbox-button>
      <el-checkbox-button label="線下主題活動(dòng)" name="type"></el-checkbox-button>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊資源">
    <el-radio-group v-model="sizeForm.resource" size="medium">
      <el-radio border label="線上品牌商贊助"></el-radio>
      <el-radio border label="線下場地免費(fèi)"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item size="large">
    <el-button type="primary" @click="onSubmit">立即創(chuàng)建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
</template>

<script>
  export default {
    data() {
      return {
        sizeForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
        },
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!')
      },
    },
  }
</script>

Form Attributes

參數(shù)說明類型可選值默認(rèn)值
model表單數(shù)據(jù)對(duì)象object——
rules表單驗(yàn)證規(guī)則object——
inline行內(nèi)表單模式boolean—false
label-position表單域標(biāo)簽的位置，如果值為 left 或者 right 時(shí)，則需要設(shè)置 label-widthstringright / left / topright
label-width表單域標(biāo)簽的寬度，例如 '50px'。作為 Form 直接子元素的 form-item 會(huì)繼承該值。支持 auto。string / number——
label-suffix表單域標(biāo)簽的后綴string——
hide-required-asterisk是否顯示必填字段的標(biāo)簽旁邊的紅色星號(hào)boolean—false
show-message是否顯示校驗(yàn)錯(cuò)誤信息boolean—true
inline-message是否以行內(nèi)形式展示校驗(yàn)信息boolean—false
status-icon是否在輸入框中顯示校驗(yàn)結(jié)果反饋圖標(biāo)boolean—false
validate-on-rule-change是否在 rules 屬性改變后立即觸發(fā)一次驗(yàn)證boolean—true
size用于控制該表單內(nèi)組件的尺寸stringmedium / small / mini—
disabled是否禁用該表單內(nèi)的所有組件。若設(shè)置為 true，則表單內(nèi)組件上的 disabled 屬性不再生效boolean—false

Form Methods

方法名說明參數(shù)
validate對(duì)整個(gè)表單進(jìn)行校驗(yàn)的方法，參數(shù)為一個(gè)回調(diào)函數(shù)。該回調(diào)函數(shù)會(huì)在校驗(yàn)結(jié)束后被調(diào)用，并傳入兩個(gè)參數(shù)：是否校驗(yàn)成功和未通過校驗(yàn)的字段。若不傳入回調(diào)函數(shù)，則會(huì)返回一個(gè) promiseFunction(callback: Function(boolean, object))
validateField對(duì)部分表單字段進(jìn)行校驗(yàn)的方法Function(props: array | string, callback: Function(errorMessage: string))
resetFields對(duì)整個(gè)表單進(jìn)行重置，將所有字段值重置為初始值并移除校驗(yàn)結(jié)果—
scrollToField滾動(dòng)到指定表單字段Function(prop: string)
clearValidate移除表單項(xiàng)的校驗(yàn)結(jié)果。傳入待移除的表單項(xiàng)的 prop 屬性或者 prop 組成的數(shù)組，如不傳則移除整個(gè)表單的校驗(yàn)結(jié)果Function(props: array | string)

Form Events

事件名稱說明回調(diào)參數(shù)
validate任一表單項(xiàng)被校驗(yàn)后觸發(fā)被校驗(yàn)的表單項(xiàng) prop 值，校驗(yàn)是否通過，錯(cuò)誤消息（如果存在）

Form-Item Attributes

參數(shù)說明類型可選值默認(rèn)值
prop表單域 model 字段，在使用 validate、resetFields 方法的情況下，該屬性是必填的string傳入 Form 組件的 model 中的字段—
label標(biāo)簽文本string——
label-width表單域標(biāo)簽的的寬度，例如 '50px'。支持 auto。string / number——
required是否必填，如不設(shè)置，則會(huì)根據(jù)校驗(yàn)規(guī)則自動(dòng)生成boolean—false
rules表單驗(yàn)證規(guī)則, 具體配置見下表, 更多內(nèi)容參考async-validatorobject / array——
error表單域驗(yàn)證錯(cuò)誤信息, 設(shè)置該值會(huì)使表單驗(yàn)證狀態(tài)變?yōu)?code>error，并顯示該錯(cuò)誤信息string——
show-message是否顯示校驗(yàn)錯(cuò)誤信息boolean—true
inline-message以行內(nèi)形式展示校驗(yàn)信息boolean—false
size用于控制該表單域下組件的尺寸stringmedium / small / mini—

Rules

參數(shù)說明類型可選值默認(rèn)值
trigger驗(yàn)證觸發(fā)方式stringblur / change—

Form-Item Slot

name說明
—Form Item 的內(nèi)容
label自定義標(biāo)簽，參數(shù)為 { label }
error自定義表單校驗(yàn)信息的顯示方式，參數(shù)為 { error }

Form-Item Methods

方法名說明參數(shù)
resetField對(duì)該表單項(xiàng)進(jìn)行重置，將其值重置為初始值并移除校驗(yàn)結(jié)果—
clearValidate移除該表單項(xiàng)的校驗(yàn)結(jié)果—


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)