1. Form表單

1.1. 屬性

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

1.2. Form Methods

方法名	說明	參數(shù)
validate	對整個表單進行校驗的方法, 參數(shù)為一個回調(diào)函數(shù)。該回調(diào)函數(shù)會在校驗結(jié)束后被調(diào)用, 并傳入兩個參數(shù): 是否校驗成功和未通過校驗的字段。若不傳入回調(diào)函數(shù), 則會返回一個promise	Function(callback: Function(boolean, object))
validateField	對部分表單字段進行校驗的方法	Function(props: array | string, callback: Function(errorMessage: string))
resetFields	對整個表單進行重置, 將所有字段值重置為初始值并移除校驗結(jié)果	無
clearValidate	移除表單項的校驗結(jié)果。傳入待移除的表單項的prop屬性或者prop組成的數(shù)組, 如不傳則移除整個表單的校驗結(jié)果	Function(props: array | string)

1.3. Form Events

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

1.4. Form-Item Attributes

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

1.5. Form-Item Slot

name	說明
—	Form Item的內(nèi)容
label	標簽文本的內(nèi)容

1.6. Form-Item Scoped Slot

name	說明
error	自定義表單校驗信息的顯示方式, 參數(shù)為 { error }

1.7. Form-Item Methods

方法名	說明
resetField	對該表單項進行重置, 將其值重置為初始值并移除校驗結(jié)果
clearValidate	移除該表單項的校驗結(jié)果

2. Form表單例子

2.1. 使用腳手架新建一個名為element-ui-form的前端項目, 同時安裝Element插件。

2.2. 編寫index.js?

import Vue from 'vue' import VueRouter from 'vue-router' import NormalForm from '../components/NormalForm.vue' import InlineForm from '../components/InlineForm.vue' import LabelPosition from '../components/LabelPosition.vue' import RuleForm from '../components/RuleForm.vue' import MyRuleForm from '../components/MyRuleForm.vue' import DynamicForm from '../components/DynamicForm.vue' import SizeForm from '../components/SizeForm.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/NormalForm' },{ path: '/NormalForm', component: NormalForm },{ path: '/InlineForm', component: InlineForm },{ path: '/LabelPosition', component: LabelPosition },{ path: '/RuleForm', component: RuleForm },{ path: '/MyRuleForm', component: MyRuleForm },{ path: '/DynamicForm', component: DynamicForm },{ path: '/SizeForm', component: SizeForm } ]const router = new VueRouter({routes })export default router

2.3. 在components在新建NormalForm.vue

<template><div class="myform"><h1>典型表單</h1><h4>在Form組件中, 每一個表單域由一個Form-Item組件構(gòu)成, 表單域中可以放置各種類型的表單控件, 包括Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。</h4><el-form ref="form" :model="form" label-width="80px"><el-form-item label="活動名稱"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="活動區(qū)域"><el-select v-model="form.region" placeholder="請選擇活動區(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="活動時間"><el-col :span="11"><el-date-picker type="date" placeholder="選擇日期" v-model="form.date1"></el-date-picker></el-col><el-col :span="2">-</el-col><el-col :span="11"><el-time-picker placeholder="選擇時間" v-model="form.date2"></el-time-picker></el-col></el-form-item><el-form-item label="即時配送"><el-switch v-model="form.delivery"></el-switch></el-form-item><el-form-item label="活動性質(zhì)"><el-checkbox-group v-model="form.type"><el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox><el-checkbox label="地推活動" name="type"></el-checkbox><el-checkbox label="線下主題活動" 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="線下場地免費"></el-radio></el-radio-group></el-form-item><el-form-item label="活動形式"><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></div> </template><script> export default {data () {return {form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''}}},methods: {onSubmit () {console.log('submit!')}} } </script><style scoped>.myform {width: 720px;}.el-select {width: 100%;}.el-col-11 > .el-date-editor {width: 100%;}.el-col-2 {text-align: center;} </style>

2.4. 在components在新建InlineForm.vue

<template><div><h1>行內(nèi)表單</h1><h4>設(shè)置inline屬性可以讓表單域變?yōu)樾袃?nèi)的表單域。</h4><el-form :inline="true" :model="formInline"><el-form-item label="審批人"><el-input v-model="formInline.user" placeholder="審批人"></el-input></el-form-item><el-form-item label="活動區(qū)域"><el-select v-model="formInline.region" placeholder="活動區(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></div> </template><script> export default {data () {return {formInline: {user: '',region: ''}}},methods: {onSubmit () {console.log('submit!')}} } </script>

2.5. 在components在新建LabelPosition.vue

<template><div style="width: 860px;"><h1>對齊方式</h1><h4>通過設(shè)置label-position屬性可以改變表單域標簽的位置, 可選值為top、left, 當設(shè)為top時標簽會置于表單域的頂部。</h4><el-radio-group v-model="labelPosition" size="small"><el-radio-button label="left">左對齊</el-radio-button><el-radio-button label="right">右對齊</el-radio-button><el-radio-button label="top">頂部對齊</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="活動區(qū)域"><el-input v-model="formLabelAlign.region"></el-input></el-form-item><el-form-item label="活動形式"><el-input v-model="formLabelAlign.type"></el-input></el-form-item></el-form></div> </template><script> export default {data () {return {labelPosition: 'right',formLabelAlign: {name: '',region: '',type: ''}}} } </script>

2.6. 在components在新建RuleForm.vue

<template><div><h1>表單驗證</h1><h4>Form組件提供了表單驗證的功能, 只需要通過rules屬性傳入約定的驗證規(guī)則, 并將Form-Item的prop屬性設(shè)置為需校驗的字段名即可。</h4><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"><el-form-item label="活動名稱" prop="name"><el-input v-model="ruleForm.name" style="width: 220px;"></el-input></el-form-item><el-form-item label="活動區(qū)域" prop="region"><el-select v-model="ruleForm.region" placeholder="請選擇活動區(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="submitForm('ruleForm')">立即創(chuàng)建</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></div> </template><script> export default {data () {return {ruleForm: {name: '',region: ''},rules: {name: [{ required: true, message: '請輸入活動名稱', trigger: 'blur' },{ min: 3, max: 5, message: '長度在3到5個字符', trigger: 'blur' }],region: [{ required: true, message: '請選擇活動區(qū)域', trigger: 'change' }]}}},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>

2.7. 在components在新建MyRuleForm.vue

<template><div style="width: 520px;"><h1>自定義校驗規(guī)則</h1><h4>本例子中展示了如何使用自定義驗證規(guī)則來完成密碼的二次驗證。</h4><h4>本例還使用status-icon屬性為輸入框添加了表示校驗結(jié)果的反饋圖標。</h4><el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"><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="確認密碼" 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></div> </template><script> export default {data () {var checkAge = (rule, value, callback) => {if (value < 18) {callback(new Error('必須年滿18歲'))} else {callback()}}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('請再次輸入密碼'))} 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: [{ required: true, message: '年齡不能為空' },{ type: 'number', message: '年齡必須為數(shù)字值' },{ 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>

2.8. 在components在新建DynamicForm.vue

<template><div><h1>動態(tài)增減表單項</h1><h4>除了在Form組件上一次性傳遞所有的驗證規(guī)則外還可以在單個的表單域上傳遞屬性的驗證規(guī)則。</h4><el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px"><el-form-item prop="email" label="郵箱" :rules="emailRule"><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="domainRule"><el-input v-model="domain.value"></el-input><el-button class="delete-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></div> </template><script> export default {data () {return {dynamicValidateForm: {domains: [{value: ''}],email: ''},emailRule: [{ required: true, message: '請輸入郵箱地址', trigger: 'blur' },{ type: 'email', message: '請輸入正確的郵箱地址', trigger: ['blur', 'change'] }],domainRule: {required: true, message: '域名不能為空', 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()},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><style scoped>.el-input {width: 220px;}.delete-button {margin-left: 20px;} </style>

2.9. 在components在新建SizeForm.vue

<template><div><h1>表單內(nèi)組件尺寸控制</h1><h4>通過設(shè)置Form上的size屬性可以使該表單內(nèi)所有可調(diào)節(jié)大小的組件繼承該尺寸。Form-Item也具有該屬性。</h4><el-form ref="form" :model="sizeForm" size="mini" label-width="80px" style="width: 420px;"><el-form-item label="活動名稱"><el-input v-model="sizeForm.name"></el-input></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="線下場地免費"></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></div> </template><script> export default {data () {return {sizeForm: {name: '',resource: ''}}},methods: {onSubmit () {console.log('submit!')}} } </script>

2.10. 訪問http://localhost:8080/#/NormalForm

2.11. 訪問http://localhost:8080/#/InlineForm?

2.12. 訪問http://localhost:8080/#/LabelPosition?

2.13. 訪問http://localhost:8080/#/RuleForm?

2.14. 訪問http://localhost:8080/#/MyRuleForm?

2.15. 訪問http://localhost:8080/#/DynamicForm

?

2.16. 訪問http://localhost:8080/#/SizeForm

總結(jié)

以上是生活随笔為你收集整理的021_Form表单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。