1.UI效果圖

2.html程式碼詳解

<template>
    <div id="app">
        <el-form inline :model="formdata" :rules="rules" ref="elfrom">
            <el-form-item label="審批人" prop="username">
                <el-input v-model="formdata.username" placeholder="審批人"></el-input>
            </
 
el-form-item>
            <el-form-item label="活動區域">
                <el-select v-model="formdata.region" placeholder="活動區域">
                    <el-option label="上海" value="上海">上海</el-option>
                    <el-option label="北京" value="北京">北京</el-option>
                </
 
el-select>
            </el-form-item>
            <el-form-item>
                <el-button autofocus size="medium" type="primary" @click="onSubmit">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

2.1.el-form標籤

這個標籤只有一個

2.2.el-form標籤上的屬性

• 2.2.1.inline：控制樣式在一行與否

• 2.2.2.model：動態輸入的物件
  

• 2.2.3.rules：驗證規則

• 2.2.4.ref：獲取dom結構，用在提交時this.$refs.elform.validate( ()=>{} ),ref的內容可以任意名稱

2.3.el-form-item標籤上的屬性

每一個表單部分由一個el-form-item標籤包裹著

• 2.3.1.label：對應的標題名稱
• 2.3.2.prop：驗證規則rules裡面的屬性，必須和fromdata裡面的屬性對應，讓程式碼知道是為哪個部分驗證

3.js程式碼

export default {
    name: 'app',
    data (){
        const userValidator = (rule, value, callback) => {
            if(value.length > 3){
                callback();
            }else{
                callback( new Error('使用者長度必須大於3') );
            }
        }
        return {
            formdata: {
                username: '',
                region: ''
            },
            rules: {
                username: [
                    { required: true, trigger: 'change', message: '使用者名稱必須錄入' },
                    { validator: userValidator, trigger: 'change'}
                ]
            }
        }
    },
    methods: {
        onSubmit(){
            this.$refs.elfrom.validate( (isValidate, errordata)=> {
                console.log(isValidate);
                console.log(errordata);
            })
        }
    }

}

3.1.驗證規則的順序

3.1.1.第一步

驗證username的第一條物件裡面的規則，即，{ required: true,trigger:'change',message:'使用者名稱必須錄入'}

即，message:'使用者名稱必須錄入'

3.1.2.第二步

驗證username的第二條物件裡面的規則，即，{validator：userValidator,trigger:'change'}

即，new Error('使用者長度必須大於3')

3.1.3.第三步

點選提交之後的驗證this.$refs.elform.validate()

3.2.注意userValidator的位置