vue基礎之詳解ElementUI的表單

2022-02-14 16:00:11

ElementUI表單

el的表單官網內容很多，看了一眼覺得心累了。但實際上它使用起來非常的方便,el為我們封裝了各種元件，樣式也大眾。

一個簡單的案例

程式碼如下（使用時確保引入了相關的元件）

<template>
<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="使用者名稱"><!-- form-item用於顯示關聯的檔案 -->
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="密碼">
    <el-input type="password" v-model="form.pwd"></el-input>
  </el-form-item>
      <el-form-item>
    <el-button type="primary" @click="onSubmit">登入</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
</template>
<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          pwd:''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

看起來還是挺多行是嗎?去掉些必要標籤還有些宣告，剩下的是：el-form,el-input,el-form-item三個元件。el-form是必要的,對佈局有影響，el-form-item是做為關聯表單元素的文字，el-input便是我們的輸入框了。佈局已經預設，用這三個便可以是最基本的表單了。是否方便？

表單的主要元件

常用的表單元件，輸入框，下拉框，單選框，多選框，文字域，對應的元件是：Form,FormItem,Input,Select,Option,Checkbox,Radio。

還有一些同樣是實用元件，開關(Switch)、日期選擇器(DatePicker),時間選擇器(TimePicker)單選框組(RadioGroup),多選框組(CheckboxGroup)等

表單元件的使用

不管哪一種元件都一樣，先main.js中引入模組，然後在頁面中即可使用：

// main.js
import {Form,FormItem,Input,CheckboxGroup,Radio, RadioGroup,Switch} from 'element-ui';
Vue.use(Form)
Vue.use(RadioGroup)
Vue.use(Radio)
Vue.use(FormItem)
Vue.use(Input)
// ...需要哪些引入哪些

假設在form.vue中使用,程式碼多了看了煩，我只寫一個下拉框、開關、文字域。(這叫拋磚引玉,xixi)

<template>
<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活動區域">
      <!-- 記得使用v-model來繫結表單欄位 -->
    <el-select v-model="form.region" placeholder="請選擇活動區域">
      <el-option label="區域一" value="shanghai"></el-option>
      <el-option label="區域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="即時配送">
      <!-- 記得使用v-model來繫結表單欄位 -->
    <el-switch v-model="form.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活動形式">
      <!-- 記得使用v-model來繫結表單欄位 -->
    <el-input type="textarea" v-model="form.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即建立</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
</template>
<script>
  export default {
    data() {
      return {
        form: {
          region: '',// 區域
          delivery: false,// 是否及時配送
          desc: '' //活動形式描述
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

效果如下

行內的表單

不難發現我們的元件都是再一個元件站一行，如果要使元件變為行內元素也肥腸簡單。給el-form元件新增:inline="true"的屬性即可（屬性前加冒號才會認值為true是一個布林，否將認為是字串）

<el-form :inline="true">
    <!--// 如此即可 -->
</el-form>

對齊方式

**這裡的對齊指的是label的文字對齊方式。**同樣是載入el-form元件的label-position屬性中

label-position的可用值： left,right,top(top為label在上，元件再下的顯示，不在同一行)。如下

<el-form label-position="left">
    <!--// 如此即可 -->
</el-form>

表單驗證

表單驗證的關鍵點有三：

1.el-form元件中新增:rules="規則組物件"屬性新增，值為驗證規則的物件

2.表單元件新增prop屬性為元件指定驗證規則。prop屬性加在el-form-item上

3.定義驗證規則的物件

驗證一般用於輸入框

如下程式碼：

<template>    
<el-form ref="form" :rules="rules" :model="form" label-width="180px">
  <el-form-item label="活動名稱，長度限制" prop="name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="url，型別限制" prop="u">
    <el-input v-model="form.url"></el-input>
  </el-form-item>
</el-form>
</template>
<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          url:'',
        },
        rules:{
            name:[
                { required: true, message: '請輸入活動名稱', trigger: 'blur' },
                { min: 3, max: 5, message: '長度在 3 到 5 個字元', trigger: 'blur' }
            ],
            u:[
                { type: 'url', required: true, message: '必須為規範的url地址', trigger: 'change' }
            ]
        },
      }
    },
    }
  }
</script>

重點提一下，如過要驗證數位型別，那麼。需要把v-model換成v-model.number!!! 切記！！！

<el-form-item label="url，型別限制" prop="u">
    <!-- 加上.number修飾符才會把輸入值轉為數位型別 -->
    <el-input v-model.number="form.num"></el-input>
</el-form-item>

自定義的驗證規則

自定義驗證與預定義驗證的不同在於一點(考考你，共有哪三個關鍵點)：

自定義規則物件的編寫形式

<script>
export default {
    data() {
        let checkNum = (rules,val,callback)=>{
            rules // 這裡會得到定義的校驗物件的屬性
            if(!Number.isInteger(val)){
                // 如果要提示錯誤資訊，那麼通過第三個引數回撥出去，引數值為Error範例
                callback(new Error('請輸入數值'))
            }
        }
        return {
           // 校驗規則
            rules:{
	            u:[
                    { type: 'url', required: true, message: '必須為規範的url地址', trigger: 'change' },
                    // 新增一條自定義的驗證，值為函數名
                    {validator:checkNum,targger:'change'}
    	        ],
	        },
        }
    }
}
</script>

表單內元件尺寸控制

通過給el-form新增size屬性，來指定表單元素的尺寸。很簡單，如下

size的可用值：medium / small / mini

<el-form size="miniz">
</el-form>

總結form模組的屬性

屬性	屬性值	說明
model	`object`	表單資料物件
rules	`object`	驗證規則
inline	`Boolean`預設false	是否設定為行內元素
label-position	`right/left/top`預設right	表單域標籤對齊方式
label-width	`string`例如150px	標籤標籤(label)的寬度
size	medium / small / mini	表單元件尺寸
status-icon	`boolean`預設false	是否顯示校驗結果的icon
disabled	`boolean`預設false	作用域為整個表單。不用多解釋了

form模組的方法

Form Methods（官方檔案的，瞭解一下）

方法名	說明	引數
validate	對整個表單進行校驗的方法，引數為一個回撥函數。該回撥函數會在校驗結束後被呼叫，並傳入兩個引數：是否校驗成功和未通過校驗的欄位。若不傳入回撥函數，則會返回一個 promise	Function(callback: Function(boolean, object))
validateField	對部分表單欄位進行校驗的方法	Function(props: array \| string, callback: Function(errorMessage: string))
resetFields	對整個表單進行重置，將所有欄位值重置為初始值並移除校驗結果	—
clearValidate	移除表單項的校驗結果。傳入待移除的表單項的 prop 屬性或者 prop 組成的陣列，如不傳則移除整個表單的校驗結果	Function(props: array \| string)

如何使用這些方法？

<template>
	<el-form ref="f">
    </el-form>
</template>
<script>
    // 重置表單
    const from = this.$refs.f.resetFields()
</script>

form-item模組的屬性

引數	引數值	說明
prop	`string`	傳入model的欄位。在使用 validate、resetFields 方法的情況下，該屬性是必填的
label	`string`	tag text
label-width	`string`	例如150px。標籤佔用的框度
required	`boolean`	是否必填
rules	`object`	表單校驗規則
size	`medium / small / mini`	元件尺寸
show-message	`boolean`預設true	是否顯示校驗錯誤資訊
inline-message	`boolean`預設false	以行內形式展示校驗資訊