Element Form表單實踐（上）

時間  2020-05-29
標籤 element form 表單 實踐 欄目 HTML 简体版
原文   原文鏈接

做者：小土豆biubiubiujavascript

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

掘金：juejin.im/user/58c61b…html

微信公衆號：土豆媽的碎碎念（掃碼關注，一塊兒吸貓，一塊兒聽故事，一塊兒學習前端技術）前端

碼字不易，點贊鼓勵喲~vue

前言

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

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

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

項目環境

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

<!-- 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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- element: 引入樣式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- element: 引入組件庫 -->
    <script src="https://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>
複製代碼

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

接着咱們就開始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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- 引入樣式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入組件庫 -->
    <script src="https://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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- 引入樣式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入組件庫 -->
    <script src="https://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/58c61b…

微信公衆號

土豆媽的碎碎念

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

歡迎你們掃碼關注，一塊兒吸貓，一塊兒聽故事，一塊兒學習前端技術

做者寄語

小小總結，歡迎你們指導~

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程