Element Form表單實踐（上）

作者：小馬鈴薯biubiubiu

博客園：//www.cnblogs.com/HouJiao/

掘金：//juejin.im/user/58c61b4361ff4b005d9e894d

微信公眾號：馬鈴薯媽的碎碎念（掃碼關注，一起吸貓，一起聽故事，一起學習前端技術）

碼字不易，點贊鼓勵喲~

前言

本篇文章主要是實踐一下Element中的 Form 表單組件。

本篇內容較為簡單，基本上是參照着文檔將表單部分內容實踐了一下，後續會持續更新表單的一些常用功能。

同時下一篇文章 Element Form表單實踐（下） 將會分享項目開發中的一個表單實踐，記錄在這個過程中遇到的一些問題。

項目環境

為了簡單快速，我使用引入cdn靜態資源的方式搭建項目的開發環境。

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Element Form表單實踐</title>
    
    <!-- vue: 開發環境版本，包含了有幫助的命令行警告 -->
    <script src="//cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- element: 引入樣式 -->
    <link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- element: 引入組件庫 -->
    <script src="//unpkg.com/element-ui/lib/index.js"></script>
    
</head>
<body>
    <div id="box">
        <span> {{message}} </span>
        <el-divider></el-divider>
    </div>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                message: "Element Form表單實踐"
            }
        })
    </script>
</body>
</html>

環境準備好後，直接本地打開頁面，就能看到效果。

接着我們就開始Element Form表單的實踐。

使用Form組件

典型表單

首先按照官方文檔我們先實踐一下典型表單。

典型表單的完整代碼如下：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Element Form表單實踐</title>
    <!-- 開發環境版本，包含了有幫助的命令行警告 -->
    <script src="//cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- 引入樣式 -->
    <link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入組件庫 -->
    <script src="//unpkg.com/element-ui/lib/index.js"></script>
    
</head>
<body>
    <div id="box">
        <span> {{message}} </span>
        <el-divider></el-divider>
        <!-- 典型表單 -->
        <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="活動區域">
                <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="活動時間">
                <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="選擇時間" v-model="form.date2" style="width: 100%;"></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="活動性質">
                <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">立即創建</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                message: "Element Form表單實踐",
                form: {
                    name: '',         // 活動名稱
                    region: '',       // 活動區域
                    date1: '',        // 活動時間-日期
                    date2: '',        // 活動時間-時間
                    delivery: false,  // 即時配送
                    type: [],         // 活動性質
                    resource: '',     // 特殊資源
                    desc: ''          // 活動形式
                }
            },
            methods: {
                onSubmit() {
                    console.log('submit!');
                }
            }
        })
    </script>
</body>
</html>

瀏覽器打開頁面：

可以看到表單組件已經顯示到了頁面上。

接下來，我們就這個表單組件的一些重要的特性進行學習。

表單屬性

表單屬性指的是設置在el-form元素上的屬性

model

model屬性在前面的用法如下：

<!-- 典型表單 -->
<el-form ref="form" :model="form" label-width="80px">

</el-form>

model屬性是表單的數據，它綁定的form數據如下：

form: {
    name: '',         // 活動名稱
    region: '',       // 活動區域
    date1: '',        // 活動時間-日期
    date2: '',        // 活動時間-時間
    delivery: false,  // 即時配送
    type: [],         // 活動性質
    resource: '',     // 特殊資源
    desc: ''          // 活動形式
}

form數據中的每一項分別對應表單中的一個el-form-item項，比如name對應的是活動名稱，那麼el-form-item寫法如下：

<el-form-item label="活動名稱">
    <el-input v-model="form.name"></el-input>
</el-form-item>

這裡需要注意表單控件el-input的v-model並沒有綁定在el-form-item上:
input控件對應的是el-input,v-model綁定在el-input上
select控件對應的是el-select
checkbox控件對應的是el-checkbox-group+el-checkbox,v-model綁定在el-checkbox-group上
radio控件對應的是el-radio-group+el-radio,v-model綁定在el-radio=group上
switch切換控件對應的是el-switch,v-model綁定在el-switch上

model綁定的form數據

接下來我們在探究一下這個form數據。

為了探究這個form數據，需要做下面的三件事：

01：在"立即創建"按鈕綁定的onSubmit函數中打印form數據
02：填寫表單信息
03：點擊"立即創建"按鈕,查看form數據打印結果

第一步：在立即創建按鈕綁定的onSubmit函數中打印form數據。

methods: {
    onSubmit() {
        console.log(this.form);
    }
}

第二步：填寫表單信息。

第三步：點擊立即創建按鈕,查看form數據打印結果。

可以看到form數據包含了我們表單填寫的內容，我將form中的字段、字段的值和表單控件的關係梳理一下。

屬性/字段 描述 控件類型 值 值的來源 類型
name 活動名稱 input “element form表單實踐” input輸入框的內容 String
region 活動區域 select “shanghai” 選中的select的value值 String
date1 活動時間-日期 el-time-picker Thu May 07 2020 00:00:00 GMT+0800 (中國標準時間) 日期控件選擇的內容 Date
date2 活動時間-時間 el-time-picker Thu May 07 2020 18:24:39 GMT+0800 (中國標準時間) 時間控件選擇的內容 Date
delivery 即時配送 el-switch true switch的選擇結果 Boolean
type 活動性質 checkbox [“美食/餐廳線上活動”,”地推活動”] 選中的checkbox的label值 Boolean
resource 特殊資源 radio “線上品牌商贊助” 選中的radio的label值 String
desc 活動形式 input “其他” input輸入框內容 String

可以看到，表單el-form的model屬性綁定的form數據和表單中的內容是一致的，因此在日常項目開發中，表單信息填寫完成，點擊提交按鈕，可以直接將this.form作為請求的參數直接發送給後端。

不過這裡很有必要對this.form這個數據進行一些完善。

在前面的代碼中，最終form中的type值和resource值都是中文的結果，這樣的中文數據傳遞到後端，對後端的邏輯處理是很不友好的。

所以在日常的項目開發中，前後端會對這樣的數據有一個默認的約定關係：

// 活動性質
{   'foodOnlineActivities': '美食/餐廳線上活動',
    'earthPushingActivity': '地推活動',
    'offlineThemeActivities': '下線主題活動'，
    'brandExposure': '單純品牌曝光',
}
// 活動形式
{   'online': '美食/餐廳線上活動',
    'offline': '地推活動'
}

或者在簡單一些的約定：

// 活動性質
{   'foodOnlineActivities': '1',
    'earthPushingActivity': '2',
    'offlineThemeActivities': '3'，
    'brandExposure': '4',
}
// 活動形式
{   'online': '1',
    'offline': '2'
}

對應的我們的前端代碼需要修改成下面這樣：

<el-form-item label="活動性質" prop="type">
    <el-checkbox-group v-model="form.type">
        <el-checkbox label="1" name="type">美食/餐廳線上活動</el-checkbox>
        <el-checkbox label="2" name="type">地推活動</el-checkbox>
        <el-checkbox label="3" name="type">線下主題活動</el-checkbox>
        <el-checkbox label="4" name="type">單純品牌曝光</el-checkbox>
    </el-checkbox-group>
</el-form-item>
<el-form-item label="特殊資源" prop="resource">
    <el-radio-group v-model="form.resource">
        <el-radio label="1">線上品牌商贊助</el-radio>
        <el-radio label="2">線下場地免費</el-radio>
    </el-radio-group>
</el-form-item>

接着在選擇對應的選項，查看form數據的結果：

修改之後的form數據傳遞到後端以後，不管是對數據進行保存或者判斷等邏輯，都比較簡單，而且不會因為中文的編碼而出現問題。

關於form數據最後的一點就是form的初始值。

我們看到form數據默認都是空值（form字段的類型大多都不相同，這裡將上面的初始值統稱為空值），實際上我們可以為其指定默認值：即直接在data中給form.xx設置默認值。

這裡將上面type和resource設置的值恢復成了中文，項目開發中記得設置成上面的那種形式。

 form: {
    name: '我是初始化設置的活動名稱', // 活動名稱
    region: 'beijing',                // 活動區域
    date1: new Date(),                // 活動時間-日期
    date2: new Date(),                // 活動時間-時間
    delivery: true,                   // 即時配送
    type: ['單純品牌曝光'],           // 活動性質
    resource: '線上品牌商贊助',       // 特殊資源
    desc: '我是初始化設置的活動形式'  // 活動形式
}

設置了默認值後，我們刷新頁面，表單中的內容就是我們設置的值。

注意：對於select、checkbox和radio這幾個控件，form字段中的值必須要和對應控件的label值一致，否則控件匹配不到，對應的內容也就無法反填到表單中。

rules

表單屬性rules是用於設置表單的驗證規則，我們來實踐一下。

<!-- index.html -->
<el-form ref="form" :model="form" :rules="addFormRules" label-width="80px">

    <!-- 中間未修改的代碼省略-->
    
</el-form>

可以看到:rule作用在el-form上，並且綁定了一個變量addFormRules。

接着我們就在addFormRules中編寫活動名稱name的驗證規則。

// 有部分未修改的代碼省略
var vm = new Vue({
    el: '#box',
    data: {
        addFormRules: {
            name: [{
                required: true, // name字段是否必填,true:必填 false:非必填
                trigger: 'blur', // 在什麼時候觸發驗證,blur:在元素失去焦點的時候驗證規則
                message: "請輸入活動名稱",  // 如果沒有填寫時的錯誤提示語
            },{
                min: 5,         // 字段最小長度
                max: 10,        // 字段最大長度
                trigger: 'blur',    // 在什麼時候觸發驗證,blur:在元素失去焦點的時候驗證規則
                message: "活動名稱長度在5-10個字符",    // 不滿足規則時顯示的錯誤提示語
            }]
        }
    }
})

在addFormRules裏面我們定義了name字段，該字段是一個數組，數組的每一項又是一個json。
就我們編寫的這個驗證規則，數組中的第一個json元素編寫的是活動名稱字段的必填驗證規則，json中的每一個鍵值對的含義注釋中都有寫到;數組中的第二個json元素編寫的是活動名稱字段的長度驗證規則。

那麼到這裡還有最重要的一步，我們的這個規則才能生效：在el-form-item上設置prop屬性。

<!-- index.html -->
<el-form ref="form" :model="form" :rules="addFormRules" label-width="80px">

    <el-form-item label="活動名稱" prop="name">
        <el-input v-model="form.name"></el-input>
    </el-form-item>
    
    <!-- 中間未修改的代碼省略-->
    
</el-form>

可以看到prop屬性的值就是form中定義的name字段，只有這樣addFormRules中定義的對name的校驗規則才能和對應的表單關聯起來，否則驗證規則是不會生效的。

這裡需要注意的是，表單el-form上綁定的form數據中的字段、prop設置的值以及rule綁定的addFormRules數據中的字段，這三個必須都要一致，否則校驗會出現問題。

label-position、label-width、label-suffix

這三個表單屬性都是用於設置表單域的標籤。

label-position用於設置標籤域的對齊方式(默認右對齊)；label-width用於設置標籤域的寬度；label-suffix用於設置標籤域的後綴。

 <el-form 
    ref="form" 
    :model="form" 
    :rules="addFormRules" 
    label-position="left"
    label-width="120px"
    label-suffix=":">
    
    <!-- 中間未修改的代碼省略-->
    
</el-form>

status-icon

 <el-form 
    ref="form" 
    :model="form" 
    :rules="addFormRules" 
    label-width="120px"
    status-icon="true">
    
    <!-- 中間未修改的代碼省略-->
    
</el-form>

表單方法

validate

表單方法validate是對整個表單進行校驗的方法，參數為一個回調函數。

該回調函數會在校驗結束後被調用，並傳入兩個參數：是否校驗成功和未通過校驗的字段。若不傳入回調函數，則會返回一個promise。

下面我們就來實踐一下這個表單方法。

主要的改動就是在提交表單的時候調用validate方法，打印出回調函數中的兩個參數。

<el-form 
    ref="form" 
    :model="form" 
    :rules="addFormRules"
    label-width="120px"
    label-suffix=":"
    :status-icon="statusIcon">
    
    <!-- 中間未修改的代碼省略-->
    <el-form-item>
        <el-button type="primary" @click="onSubmit">立即創建</el-button>
        <el-button>取消</el-button>
    </el-form-item>
</el-form>
<script>
var vm = new Vue({
    el: '#box',
    data: {
        message: "Element Form表單實踐",
        statusIcon: true,
        form: {
            name: '我是初始化設置的活動名稱',   // 活動名稱
            region: 'beijing', // 活動區域
            date1: new Date(),  // 活動時間-日期
            date2: new Date(),  // 活動時間-時間
            delivery: true,  // 即時配送
            type: ['單純品牌曝光'],         // 活動性質
            resource: '線上品牌商贊助',     // 特殊資源
            desc: '我是初始化設置的活動形式'          // 活動形式
        },
        addFormRules: {
            name: [{
                required: true,            // name字段是否必填,true:必填 false:非必填
                trigger: 'blur',    // 在什麼時候觸發驗證,blur:在元素失去焦點的時候驗證規則
                message: "請輸入活動名稱",  // 如果沒有填寫時的錯誤提示語
            },{
                min: 5,         // 字段最小長度
                max: 10,        // 字段最大長度
                trigger: 'blur',    // 在什麼時候觸發驗證,blur:在元素失去焦點的時候驗證規則
                message: "活動名稱長度在5-10個字符",    // 不滿足規則時顯示的錯誤提示語
            }]
        }
    },
    methods: {
        onSubmit() {
            this.$refs['form'].validate((validate,failedInfo) => {
                console.log('validate:')
                console.log(validate);
                console.log('failedInfo:')
                console.log(failedInfo);
            })
        }
    }
})
</script>

表單驗證成功時validate和failedInfo的打印結果：

表單驗證失敗時validate和failedInfo的打印結果：

前面我們只編寫了name字段的驗證規則，因此在表單提交調用validate方法時，只會對name字段進行驗證。

其實對於我們日常的開發來說會比較關注第一個參數，當回調函數中的第一個參數為true時，表示表單驗證成功，就可以將表單數據傳遞到後端；相反的當第一個參數為falses時，表示表單驗證失敗，我們就可以給用戶一個錯誤提示。

methods: {
    onSubmit() {
        this.$refs['form'].validate((validate,failedInfo) => {
            if(validate){
                // 將表單數據發送到後端
                // 發送 POST 請求
                axios.post(url, this.form).then(function (response) {
                    // 處理後端返回的響應數據
                    
                });
             }else{
                // 提示用戶
                this.$message({
                    message: '表單數據格式有誤,請檢查後重新提交.',
                    type: "error",
                    center: true
                });
           }
        })
    }
}

這裡有一定需要注意，回調函數最好寫成箭頭函數的形式，這樣在回調函數內部的this表示的是Vue實例對象。如果使用普通的函數聲明function，則回調函數內部的this指向的是windows對象。

resetFields

表單屬性resetFields對整個表單進行重置，將所有字段值重置為初始值並且移除校驗結果。

本次改動就是將之前的取消按鈕改為重置按鈕，並且在點擊重置按鈕的時候調用resetFields方法。

<el-form 
    ref="form" 
    :model="form" 
    :rules="addFormRules"
    label-width="120px"
    label-suffix=":"
    :status-icon="statusIcon">
    
    <!-- 中間未修改的代碼省略-->
    
    <el-form-item>
        <el-button type="primary" @click="onSubmit">立即創建</el-button>
        <el-button type="primary" @click="resetForm">重置</el-button>
    </el-form-item>
</el-form>
<script>
var vm = new Vue({
    el: '#box',
    data: {
        message: "Element Form表單實踐",
        statusIcon: true,
        form: {
            name: '我是初始化設置的活動名稱',   // 活動名稱
            region: 'beijing', // 活動區域
            date1: new Date(),  // 活動時間-日期
            date2: new Date(),  // 活動時間-時間
            delivery: true,  // 即時配送
            type: ['單純品牌曝光'],         // 活動性質
            resource: '線上品牌商贊助',     // 特殊資源
            desc: '我是初始化設置的活動形式'          // 活動形式
        },
        addFormRules: {
            name: [{
                required: true,            // name字段是否必填,true:必填 false:非必填
                trigger: 'blur',    // 在什麼時候觸發驗證,blur:在元素失去焦點的時候驗證規則
                message: "請輸入活動名稱",  // 如果沒有填寫時的錯誤提示語
            },{
                min: 5,         // 字段最小長度
                max: 10,        // 字段最大長度
                trigger: 'blur',    // 在什麼時候觸發驗證,blur:在元素失去焦點的時候驗證規則
                message: "活動名稱長度在5-10個字符",    // 不滿足規則時顯示的錯誤提示語
            }]
        }
    },
    methods: {
        onSubmit() {
            this.$refs['form'].validate((validate,failedInfo) => {
                console.log('validate:')
                console.log(validate);
                console.log('failedInfo:')
                console.log(failedInfo);
            })
        },
        resetForm(){
            this.$refs['form'].resetFileds();
        }
    }
})
</script>

仔細查看重置以後的結果，會發現只有活動名稱字段的值恢復了初始值，而其餘我們修改了表單信息的空間均沒有重置為初始值。

這裡需要注意resetFileds方法是將表單的值設置為初始值，而不是空值。初始值就是在組件的data中設置的值，所以我們點擊重置的時候活動名稱這個空間的值變回了我是初始化設置的活動名稱。

這樣的效果顯然是不對的。

不過原因也很簡單，就是我們沒有給其他的表單項設置prop屬性。所以我們要注意，在使用resetFileds時，必須給表單項el-form-item設置prop值，否則無法進行重置。

<el-form 
    ref="form" 
    :model="form" 
    :rules="addFormRules"
    label-width="120px"
    label-suffix=":"
    :status-icon="statusIcon"
    >
    <el-form-item label="活動名稱" prop="name">
        <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="活動區域" prop="region">
        <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="活動時間" >
        <el-col :span="11">
            <el-form-item prop="date1">
                <el-date-picker type="date" placeholder="選擇日期" v-model="form.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="選擇時間" v-model="form.date2" style="width: 100%;"></el-time-picker>   
            </el-form-item>
        </el-col>
    </el-form-item>
    <el-form-item label="即時配送" prop="delivery">
        <el-switch v-model="form.delivery"></el-switch>
    </el-form-item>
    <el-form-item label="活動性質" prop="type">
        <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="特殊資源" prop="resource">
        <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="活動形式" prop="desc">
        <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 type="primary" @click="resetForm">重置</el-button>
    </el-form-item>
</el-form>

這裡需要特意說明的是為活動時間這個表單項設置prop屬性。

<el-form-item label="活動時間" >
    <el-col :span="11">
        <el-form-item prop="date1">
            <el-date-picker type="date" placeholder="選擇日期" v-model="form.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="選擇時間" v-model="form.date2" style="width: 100%;"></el-time-picker>
        </el-form-item>
    </el-col>
</el-form-item>

那對比之前沒有設置prop的代碼，還給el-date-picker外層多加了一個el-form-item元素。那也很好理解，因為活動時間這個包含了兩個el-time-picker，並且綁定的不同的form數據：date1和date2。而之前的寫法兩個el-time-picker都同在一個el-form-item元素中，那設置prop時只能設置一個值，所以element提供的解決方案就是分別給兩個el-time-picker在嵌套一層el-form-item元素，這樣就能分別設置prop屬性了。

現在我們在看一下重置按鈕的效果。

可以看到所有的表單項都重置成功。

表單項屬性

表單項屬性是指設置在el-form-item上的屬性
這裡在聲明一下一些叫法，以免產生疑惑
當描述表單時，對應的元素為el-form
當描述表單項對應的元素為el-form-item

prop

這個屬性在前面實踐表單驗證、表單重置的時候用過。

那在日常開發中，表單驗證和表單重置是一個很常用的功能，因此很有必要在編寫代碼的時候給表單項設置prop屬性，以免出現一些讓人疑惑的錯誤。

一定要注意prop屬性值的設置一定要和form表單綁定的字段名稱一致

label

label屬性設置的是表單標籤域的文本描述。

size

表單組件的尺寸，共有三個可選值：medium / small / mini。

rules

這裡的rules是表單項的驗證規則，下面我們就活動名稱這個字段進行驗證。

主要改動為將表單屬性el-form上的rules移除，在活動名稱對應的el-form-item上添加rules規則驗證。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Element Form表單實踐</title>
    <!-- 開發環境版本，包含了有幫助的命令行警告 -->
    <script src="//cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- 引入樣式 -->
    <link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入組件庫 -->
    <script src="//unpkg.com/element-ui/lib/index.js"></script>
    
</head>
<body>
    <div id="box">
        <span> {{message}} </span>
        <el-divider></el-divider>
        <!-- 典型表單 -->
        <el-form 
            ref="form" 
            :model="form" 
            label-width="120px"
            label-suffix=":"
            :status-icon="statusIcon">
            <el-form-item 
                label="活動名稱" 
                prop="name" 
                :rules="[{required: true,trigger: 'blur',message: '請輸入活動名稱'}]">
                <el-input v-model="form.name" ></el-input>
            </el-form-item>
            <el-form-item label="活動區域" prop="region">
                <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="活動時間" >
                <el-col :span="11">
                    <el-form-item prop="date1">
                        <el-date-picker type="date" placeholder="選擇日期" v-model="form.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="選擇時間" v-model="form.date2" style="width: 100%;"></el-time-picker>   
                    </el-form-item>
                </el-col>
            </el-form-item>
            
            <el-form-item label="即時配送" prop="delivery">
                <el-switch v-model="form.delivery"></el-switch>
            </el-form-item>
            <el-form-item label="活動性質" prop="type">
                <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="特殊資源" prop="resource">
                <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="活動形式" prop="desc">
                <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 type="primary" @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                message: "Element Form表單實踐",
                statusIcon: true,
                form: {
                    name: '我是初始化設置的活動名稱',   // 活動名稱
                    region: 'beijing', // 活動區域
                    date1: new Date(),  // 活動時間-日期
                    date2: new Date(),  // 活動時間-時間
                    delivery: true,  // 即時配送
                    type: ['單純品牌曝光'],         // 活動性質
                    resource: '線上品牌商贊助',     // 特殊資源
                    desc: '我是初始化設置的活動形式'          // 活動形式
                },
                addFormRules: {
                    name: [{
                        required: true,            // name字段是否必填,true:必填 false:非必填
                        trigger: 'blur',    // 在什麼時候觸發驗證,blur:在元素失去焦點的時候驗證規則
                        message: "請輸入活動名稱",  // 如果沒有填寫時的錯誤提示語
                    },{
                        min: 5,         // 字段最小長度
                        max: 10,        // 字段最大長度
                        trigger: 'blur',    // 在什麼時候觸發驗證,blur:在元素失去焦點的時候驗證規則
                        message: "活動名稱長度在5-10個字符",    // 不滿足規則時顯示的錯誤提示語
                    }]
                }
            },
            methods: {
                onSubmit() {
                    this.$refs['form'].validate((validate,failedInfo) => {
                        if(validate){
                            // 將表單數據發送到後端
                            // 發送 POST 請求
                            axios.post(url, this.form).then(function (response) {
                                // 處理後端返回的響應數據

                            });
                         }else{
                            // 提示用戶
                            this.$message({
                                message: '表單數據格式有誤,請檢查後重新提交.',
                                type: "error",
                                center: true
                            });
                       }
                    })
                },
                resetForm(){
                    this.$refs['form'].resetFields();
                }
            }
        })
    </script>
</body>
</html>

主要的代碼如下：

<el-form-item 
    label="活動名稱" 
    prop="name" 
    :rules="[{required: true,trigger: 'blur',message: '請輸入活動名稱'}]">
    <el-input v-model="form.name" ></el-input>
</el-form-item>

可以看到驗證規則添加到表單項el-form-item上和添加到表單el-form上的語法基本上是一致的。

接着看下驗證的結果。

可以看到驗證規則已經生效了。

最後呢，還有一個操作想進行驗證一下，就是同時設置el-form和el-form-item上的rules。

<el-form 
    ref="form" 
    :model="form" 
    label-width="120px"
    label-suffix=":"
    :status-icon="statusIcon"
    :rules="addFormRules">
    <el-form-item 
        label="活動名稱" 
        prop="name" 
        :rules="[{required: true,trigger: 'blur',message: '請輸入活動名稱'}]">
        <el-input v-model="form.name" ></el-input>
    </el-form-item>
</el-form>

可以看到我將el-form上的rules又添加了回來。

el-form對活動名稱字段的驗證規則是不能為空且長度在5-10個字符，而el-item-form上設置的規則只有內容不能為空。

我們再來看一下結果。

可以發現只有不為空的驗證規則生效了,而長度驗證規則並沒有生效。所以結論就是el-form上的rules優先級小於el-item-form上的rules規則驗證，當el-form-item上有定義字段的驗證規則時，就會忽略對應的el-form上定義的字段的驗證規則。

結束語

到這裡本篇文章就結束了，內容非常的簡單。

下一篇將會分享項目開發中的一個表單實踐，記錄在這個過程中遇到的一些問題。

關於

作者

小馬鈴薯biubiubiu

一個努力學習的前端小菜鳥，知識是無限的。堅信只要不停下學習的腳步，總能到達自己期望的地方

同時還是一個喜歡小貓咪的人，家裡有一隻美短小母貓，名叫馬鈴薯

博客園

//www.cnblogs.com/HouJiao/

掘金

//juejin.im/user/58c61b4361ff4b005d9e894d

微信公眾號

馬鈴薯媽的碎碎念

微信公眾號的初衷是記錄自己和身邊的一些故事，同時會不定期更新一些技術文章

歡迎大家掃碼關注，一起吸貓，一起聽故事，一起學習前端技術

作者寄語

小小總結，歡迎大家指導~

Tags:

VirMach 便宜 VPS

QNews

QNews