Form 表單

時間 2019-11-24

標籤 form 表單欄目 HTML 简体版

原文原文鏈接

由輸入框、選擇器、單選框、多選框等控件組成，用以收集、校驗、提交數據html

典型表單

包括各類表單項，好比輸入框、選擇器、開關、單選框、多選框等。git

在 Form 組件中，每個表單域由一個 Form-Item 組件構成，表單域中能夠放置各類類型的表單控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePickergithub

 1 <el-form ref="form" :model="form" label-width="80px">
 2   <el-form-item label="活動名稱">
 3     <el-input v-model="form.name"></el-input>
 4   </el-form-item>
 5   <el-form-item label="活動區域">
 6     <el-select v-model="form.region" placeholder="請選擇活動區域">
 7       <el-option label="區域一" value="shanghai"></el-option>
 8       <el-option label="區域二" value="beijing"></el-option>
 9     </el-select>
10   </el-form-item>
11   <el-form-item label="活動時間">
12     <el-col :span="11">
13       <el-date-picker type="date" placeholder="選擇日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
14     </el-col>
15     <el-col class="line" :span="2">-</el-col>
16     <el-col :span="11">
17       <el-time-picker type="fixed-time" placeholder="選擇時間" v-model="form.date2" style="width: 100%;"></el-time-picker>
18     </el-col>
19   </el-form-item>
20   <el-form-item label="即時配送">
21     <el-switch v-model="form.delivery"></el-switch>
22   </el-form-item>
23   <el-form-item label="活動性質">
24     <el-checkbox-group v-model="form.type">
25       <el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox>
26       <el-checkbox label="地推活動" name="type"></el-checkbox>
27       <el-checkbox label="線下主題活動" name="type"></el-checkbox>
28       <el-checkbox label="單純品牌曝光" name="type"></el-checkbox>
29     </el-checkbox-group>
30   </el-form-item>
31   <el-form-item label="特殊資源">
32     <el-radio-group v-model="form.resource">
33       <el-radio label="線上品牌商贊助"></el-radio>
34       <el-radio label="線下場地免費"></el-radio>
35     </el-radio-group>
36   </el-form-item>
37   <el-form-item label="活動形式">
38     <el-input type="textarea" v-model="form.desc"></el-input>
39   </el-form-item>
40   <el-form-item>
41     <el-button type="primary" @click="onSubmit">當即建立</el-button>
42     <el-button>取消</el-button>
43   </el-form-item>
44 </el-form>
45 <script>
46   export default {
47     data() {
48       return {
49         form: {
50           name: '',
51           region: '',
52           date1: '',
53           date2: '',
54           delivery: false,
55           type: [],
56           resource: '',
57           desc: ''
58         }
59       }
60     },
61     methods: {
62       onSubmit() {
63         console.log('submit!');
64       }
65     }
66   }
67 </script>

View Code

W3C 標準中有以下規定：promise

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.dom

即：當一個 form 元素中只有一個輸入框時，在該輸入框中按下回車應提交該表單。若是但願阻止這一默認行爲，能夠在 <el-form>標籤上添加 @submit.native.prevent。async

行內表單

當垂直方向空間受限且表單較簡單時，能夠在一行內放置表單。ide

設置 inline 屬性可讓表單域變爲行內的表單域函數

 1 <el-form :inline="true" :model="formInline" class="demo-form-inline">
 2   <el-form-item label="審批人">
 3     <el-input v-model="formInline.user" placeholder="審批人"></el-input>
 4   </el-form-item>
 5   <el-form-item label="活動區域">
 6     <el-select v-model="formInline.region" placeholder="活動區域">
 7       <el-option label="區域一" value="shanghai"></el-option>
 8       <el-option label="區域二" value="beijing"></el-option>
 9     </el-select>
10   </el-form-item>
11   <el-form-item>
12     <el-button type="primary" @click="onSubmit">查詢</el-button>
13   </el-form-item>
14 </el-form>
15 <script>
16   export default {
17     data() {
18       return {
19         formInline: {
20           user: '',
21           region: ''
22         }
23       }
24     },
25     methods: {
26       onSubmit() {
27         console.log('submit!');
28       }
29     }
30   }
31 </script>

View Code

對齊方式

根據具體目標和制約因素，選擇最佳的標籤對齊方式。ui

經過設置 label-position 屬性能夠改變表單域標籤的位置，可選值爲 top、left，當設爲 top 時標籤會置於表單域的頂部this

 1 <el-radio-group v-model="labelPosition" size="small">
 2   <el-radio-button label="left">左對齊</el-radio-button>
 3   <el-radio-button label="right">右對齊</el-radio-button>
 4   <el-radio-button label="top">頂部對齊</el-radio-button>
 5 </el-radio-group>
 6 <div style="margin: 20px;"></div>
 7 <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
 8   <el-form-item label="名稱">
 9     <el-input v-model="formLabelAlign.name"></el-input>
10   </el-form-item>
11   <el-form-item label="活動區域">
12     <el-input v-model="formLabelAlign.region"></el-input>
13   </el-form-item>
14   <el-form-item label="活動形式">
15     <el-input v-model="formLabelAlign.type"></el-input>
16   </el-form-item>
17 </el-form>
18 <script>
19   export default {
20     data() {
21       return {
22         labelPosition: 'right',
23         formLabelAlign: {
24           name: '',
25           region: '',
26           type: ''
27         }
28       };
29     }
30   }
31 </script>

View Code

表單驗證

在防止用戶犯錯的前提下，儘量讓用戶更早地發現並糾正錯誤。

Form 組件提供了表單驗證的功能，只須要經過 rules 屬性傳入約定的驗證規則，並 Form-Item 的 prop 屬性設置爲需校驗的字段名便可。校驗規則參見 async-validator

  1 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  2   <el-form-item label="活動名稱" prop="name">
  3     <el-input v-model="ruleForm.name"></el-input>
  4   </el-form-item>
  5   <el-form-item label="活動區域" prop="region">
  6     <el-select v-model="ruleForm.region" placeholder="請選擇活動區域">
  7       <el-option label="區域一" value="shanghai"></el-option>
  8       <el-option label="區域二" value="beijing"></el-option>
  9     </el-select>
 10   </el-form-item>
 11   <el-form-item label="活動時間" required>
 12     <el-col :span="11">
 13       <el-form-item prop="date1">
 14         <el-date-picker type="date" placeholder="選擇日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
 15       </el-form-item>
 16     </el-col>
 17     <el-col class="line" :span="2">-</el-col>
 18     <el-col :span="11">
 19       <el-form-item prop="date2">
 20         <el-time-picker type="fixed-time" placeholder="選擇時間" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
 21       </el-form-item>
 22     </el-col>
 23   </el-form-item>
 24   <el-form-item label="即時配送" prop="delivery">
 25     <el-switch v-model="ruleForm.delivery"></el-switch>
 26   </el-form-item>
 27   <el-form-item label="活動性質" prop="type">
 28     <el-checkbox-group v-model="ruleForm.type">
 29       <el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox>
 30       <el-checkbox label="地推活動" name="type"></el-checkbox>
 31       <el-checkbox label="線下主題活動" name="type"></el-checkbox>
 32       <el-checkbox label="單純品牌曝光" name="type"></el-checkbox>
 33     </el-checkbox-group>
 34   </el-form-item>
 35   <el-form-item label="特殊資源" prop="resource">
 36     <el-radio-group v-model="ruleForm.resource">
 37       <el-radio label="線上品牌商贊助"></el-radio>
 38       <el-radio label="線下場地免費"></el-radio>
 39     </el-radio-group>
 40   </el-form-item>
 41   <el-form-item label="活動形式" prop="desc">
 42     <el-input type="textarea" v-model="ruleForm.desc"></el-input>
 43   </el-form-item>
 44   <el-form-item>
 45     <el-button type="primary" @click="submitForm('ruleForm')">當即建立</el-button>
 46     <el-button @click="resetForm('ruleForm')">重置</el-button>
 47   </el-form-item>
 48 </el-form>
 49 <script>
 50   export default {
 51     data() {
 52       return {
 53         ruleForm: {
 54           name: '',
 55           region: '',
 56           date1: '',
 57           date2: '',
 58           delivery: false,
 59           type: [],
 60           resource: '',
 61           desc: ''
 62         },
 63         rules: {
 64           name: [
 65             { required: true, message: '請輸入活動名稱', trigger: 'blur' },
 66             { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
 67           ],
 68           region: [
 69             { required: true, message: '請選擇活動區域', trigger: 'change' }
 70           ],
 71           date1: [
 72             { type: 'date', required: true, message: '請選擇日期', trigger: 'change' }
 73           ],
 74           date2: [
 75             { type: 'date', required: true, message: '請選擇時間', trigger: 'change' }
 76           ],
 77           type: [
 78             { type: 'array', required: true, message: '請至少選擇一個活動性質', trigger: 'change' }
 79           ],
 80           resource: [
 81             { required: true, message: '請選擇活動資源', trigger: 'change' }
 82           ],
 83           desc: [
 84             { required: true, message: '請填寫活動形式', trigger: 'blur' }
 85           ]
 86         }
 87       };
 88     },
 89     methods: {
 90       submitForm(formName) {
 91         this.$refs[formName].validate((valid) => {
 92           if (valid) {
 93             alert('submit!');
 94           } else {
 95             console.log('error submit!!');
 96             return false;
 97           }
 98         });
 99       },
100       resetForm(formName) {
101         this.$refs[formName].resetFields();
102       }
103     }
104   }
105 </script>

View Code

自定義校驗規則

這個例子中展現瞭如何使用自定義驗證規則來完成密碼的二次驗證。

本例還使用status-icon屬性爲輸入框添加了表示校驗結果的反饋圖標。

 1 <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
 2   <el-form-item label="密碼" prop="pass">
 3     <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
 4   </el-form-item>
 5   <el-form-item label="確認密碼" prop="checkPass">
 6     <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
 7   </el-form-item>
 8   <el-form-item label="年齡" prop="age">
 9     <el-input v-model.number="ruleForm2.age"></el-input>
10   </el-form-item>
11   <el-form-item>
12     <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
13     <el-button @click="resetForm('ruleForm2')">重置</el-button>
14   </el-form-item>
15 </el-form>
16 <script>
17   export default {
18     data() {
19       var checkAge = (rule, value, callback) => {
20         if (!value) {
21           return callback(new Error('年齡不能爲空'));
22         }
23         setTimeout(() => {
24           if (!Number.isInteger(value)) {
25             callback(new Error('請輸入數字值'));
26           } else {
27             if (value < 18) {
28               callback(new Error('必須年滿18歲'));
29             } else {
30               callback();
31             }
32           }
33         }, 1000);
34       };
35       var validatePass = (rule, value, callback) => {
36         if (value === '') {
37           callback(new Error('請輸入密碼'));
38         } else {
39           if (this.ruleForm2.checkPass !== '') {
40             this.$refs.ruleForm2.validateField('checkPass');
41           }
42           callback();
43         }
44       };
45       var validatePass2 = (rule, value, callback) => {
46         if (value === '') {
47           callback(new Error('請再次輸入密碼'));
48         } else if (value !== this.ruleForm2.pass) {
49           callback(new Error('兩次輸入密碼不一致!'));
50         } else {
51           callback();
52         }
53       };
54       return {
55         ruleForm2: {
56           pass: '',
57           checkPass: '',
58           age: ''
59         },
60         rules2: {
61           pass: [
62             { validator: validatePass, trigger: 'blur' }
63           ],
64           checkPass: [
65             { validator: validatePass2, trigger: 'blur' }
66           ],
67           age: [
68             { validator: checkAge, trigger: 'blur' }
69           ]
70         }
71       };
72     },
73     methods: {
74       submitForm(formName) {
75         this.$refs[formName].validate((valid) => {
76           if (valid) {
77             alert('submit!');
78           } else {
79             console.log('error submit!!');
80             return false;
81           }
82         });
83       },
84       resetForm(formName) {
85         this.$refs[formName].resetFields();
86       }
87     }
88   }
89 </script>

View Code

動態增減表單項

除了在 Form 組件上一次性傳遞全部的驗證規則外還能夠在單個的表單域上傳遞屬性的驗證規則

 1 <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
 2   <el-form-item
 3     prop="email"
 4     label="郵箱"
 5     :rules="[
 6       { required: true, message: '請輸入郵箱地址', trigger: 'blur' },
 7       { type: 'email', message: '請輸入正確的郵箱地址', trigger: 'blur,change' }
 8     ]"
 9   >
10     <el-input v-model="dynamicValidateForm.email"></el-input>
11   </el-form-item>
12   <el-form-item
13     v-for="(domain, index) in dynamicValidateForm.domains"
14     :label="'域名' + index"
15     :key="domain.key"
16     :prop="'domains.' + index + '.value'"
17     :rules="{
18       required: true, message: '域名不能爲空', trigger: 'blur'
19     }"
20   >
21     <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">刪除</el-button>
22   </el-form-item>
23   <el-form-item>
24     <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
25     <el-button @click="addDomain">新增域名</el-button>
26     <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
27   </el-form-item>
28 </el-form>
29 <script>
30   export default {
31     data() {
32       return {
33         dynamicValidateForm: {
34           domains: [{
35             value: ''
36           }],
37           email: ''
38         }
39       };
40     },
41     methods: {
42       submitForm(formName) {
43         this.$refs[formName].validate((valid) => {
44           if (valid) {
45             alert('submit!');
46           } else {
47             console.log('error submit!!');
48             return false;
49           }
50         });
51       },
52       resetForm(formName) {
53         this.$refs[formName].resetFields();
54       },
55       removeDomain(item) {
56         var index = this.dynamicValidateForm.domains.indexOf(item)
57         if (index !== -1) {
58           this.dynamicValidateForm.domains.splice(index, 1)
59         }
60       },
61       addDomain() {
62         this.dynamicValidateForm.domains.push({
63           value: '',
64           key: Date.now()
65         });
66       }
67     }
68   }
69 </script>

View Code

數字類型驗證

數字類型的驗證須要在 v-model 處加上 .number 的修飾符，這是 Vue 自身提供的用於將綁定值轉化爲 number 類型的修飾符。

 1 <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
 2   <el-form-item
 3     label="年齡"
 4     prop="age"
 5     :rules="[
 6       { required: true, message: '年齡不能爲空'},
 7       { type: 'number', message: '年齡必須爲數字值'}
 8     ]"
 9   >
10     <el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
11   </el-form-item>
12   <el-form-item>
13     <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
14     <el-button @click="resetForm('numberValidateForm')">重置</el-button>
15   </el-form-item>
16 </el-form>
17 <script>
18   export default {
19     data() {
20       return {
21         numberValidateForm: {
22           age: ''
23         }
24       };
25     },
26     methods: {
27       submitForm(formName) {
28         this.$refs[formName].validate((valid) => {
29           if (valid) {
30             alert('submit!');
31           } else {
32             console.log('error submit!!');
33             return false;
34           }
35         });
36       },
37       resetForm(formName) {
38         this.$refs[formName].resetFields();
39       }
40     }
41   }
42 </script>

View Code

嵌套在 el-form-item 中的 el-form-item 標籤寬度默認爲零，不會繼承 el-form 的 label-width。若是須要能夠爲其單獨設置 label-width 屬性。

表單內組件尺寸控制

經過設置 Form 上的 size 屬性能夠使該表單內全部可調節大小的組件繼承該尺寸。Form-Item 也具備該屬性。

若是但願某個表單項或某個表單組件的尺寸不一樣於 Form 上的size屬性，直接爲這個表單項或表單組件設置本身的size便可。

 1 <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
 2   <el-form-item label="活動名稱">
 3     <el-input v-model="sizeForm.name"></el-input>
 4   </el-form-item>
 5   <el-form-item label="活動區域">
 6     <el-select v-model="sizeForm.region" placeholder="請選擇活動區域">
 7       <el-option label="區域一" value="shanghai"></el-option>
 8       <el-option label="區域二" value="beijing"></el-option>
 9     </el-select>
10   </el-form-item>
11   <el-form-item label="活動時間">
12     <el-col :span="11">
13       <el-date-picker type="date" placeholder="選擇日期" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>
14     </el-col>
15     <el-col class="line" :span="2">-</el-col>
16     <el-col :span="11">
17       <el-time-picker type="fixed-time" placeholder="選擇時間" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
18     </el-col>
19   </el-form-item>
20   <el-form-item label="活動性質">
21     <el-checkbox-group v-model="sizeForm.type">
22       <el-checkbox-button label="美食/餐廳線上活動" name="type"></el-checkbox-button>
23       <el-checkbox-button label="地推活動" name="type"></el-checkbox-button>
24       <el-checkbox-button label="線下主題活動" name="type"></el-checkbox-button>
25     </el-checkbox-group>
26   </el-form-item>
27   <el-form-item label="特殊資源">
28     <el-radio-group v-model="sizeForm.resource" size="medium">
29       <el-radio border label="線上品牌商贊助"></el-radio>
30       <el-radio border label="線下場地免費"></el-radio>
31     </el-radio-group>
32   </el-form-item>
33   <el-form-item size="large">
34     <el-button type="primary" @click="onSubmit">當即建立</el-button>
35     <el-button>取消</el-button>
36   </el-form-item>
37 </el-form>
38 
39 <script>
40   export default {
41     data() {
42       return {
43         sizeForm: {
44           name: '',
45           region: '',
46           date1: '',
47           date2: '',
48           delivery: false,
49           type: [],
50           resource: '',
51           desc: ''
52         }
53       };
54     },
55     methods: {
56       onSubmit() {
57         console.log('submit!');
58       }
59     }
60   };
61 </script>

View Code

Form Attributes

參數	說明	類型	可選值	默認值
model	表單數據對象	object	—	—
rules	表單驗證規則	object	—	—
inline	行內表單模式	boolean	—	false
label-position	表單域標籤的位置	string	right/left/top	right
label-width	表單域標籤的寬度，做爲 Form 直接子元素的 form-item 會繼承該值	string	—	—
label-suffix	表單域標籤的後綴	string	—	—
show-message	是否顯示校驗錯誤信息	boolean	—	true
inline-message	是否以行內形式展現校驗信息	boolean	—	false
status-icon	是否在輸入框中顯示校驗結果反饋圖標	boolean	—	false
validate-on-rule-change	是否在 `rules` 屬性改變後當即觸發一次驗證	boolean	—	true
size	用於控制該表單內組件的尺寸	string	medium / small / mini	—
disabled	是否禁用該表單內的全部組件。若設置爲 true，則表單內組件上的 disabled 屬性再也不生效	boolean	—	false

Form Methods

方法名	說明	參數
validate	對整個表單進行校驗的方法。若不傳入回調函數，則會返回一個 promise	Function(callback: Function(boolean))
validateField	對部分表單字段進行校驗的方法	Function(prop: string, callback: Function(errorMessage: string))
resetFields	對整個表單進行重置，將全部字段值重置爲初始值並移除校驗結果	-
clearValidate	移除整個表單的校驗結果	-

Form-Item Attributes

參數	說明	類型	可選值	默認值
prop	表單域 model 字段，在使用 validate、resetFields 方法的狀況下，該屬性是必填的	string	傳入 Form 組件的 `model` 中的字段	—
label	標籤文本	string	—	—
label-width	表單域標籤的的寬度，例如 '50px'	string	—	—
required	是否必填，如不設置，則會根據校驗規則自動生成	bolean	—	false
rules	表單驗證規則	object	—	—
error	表單域驗證錯誤信息, 設置該值會使表單驗證狀態變爲`error`，並顯示該錯誤信息	string	—	—
show-message	是否顯示校驗錯誤信息	boolean	—	true
inline-message	以行內形式展現校驗信息	boolean	—	false
size	用於控制該表單域下組件的尺寸	string	medium / small / mini	-