element-ui表單及行內元素驗證

1.表單及驗證

<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="活動名稱" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="活動區域" prop="region">
            <el-select v-model="ruleForm.region" placeholder="請選擇活動區域">
                <el-option v-for="item in regionOption" :label="item.label" :value="item.value" :key="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="活動時間" required>
            <el-col :span="11">
                <el-form-item prop="date1">
                    <el-date-picker type="date" placeholder="選擇日期" v-model="ruleForm.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="ruleForm.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="ruleForm.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="特殊資源" prop="resource">
            <el-radio-group v-model="ruleForm.resource">
                <el-radio :label="1">線上品牌</el-radio>
                <el-radio :label="2">線下場地</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="活動形式" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>
        <el-form-item label="參與人數" prop="person">
            <el-input v-model.number="ruleForm.person"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
            <el-button @click="resetForm('ruleForm')">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        name: '',
        data() {
            //自定義驗證規則
            var validatePerson = (rule, value, callback) => {
                if (value == '' || value == null) {
                    callback(new Error('請輸入參與人數'));
                } else {
                    if (!Number.isInteger(value)) {
                        callback(new Error('參與人數只能是整數'));
                    }
                    callback();
                }
            }
            return {
                ruleForm: {},
                regionOption: [
                    {
                        label: '上海',
                        value: 0,
                    },
                    {
                        label: '北京',
                        value: 1,
                    },
                    {
                        label: '廣州',
                        value: 2,
                    }
                ],
                rules: {
                    name: [
                        { required: true, message: '請輸入活動名稱', trigger: 'blur' },
                        { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
                    ],
                    region: [
                        { required: true, message: '請選擇活動區域', trigger: 'change' }
                    ],
                    date1: [
                        { type: 'date', required: true, message: '請選擇日期', trigger: 'change' }
                    ],
                    date2: [
                        { type: 'date', required: true, message: '請選擇時間', trigger: 'change' }
                    ],
                    resource: [
                        { required: true, message: '請選擇活動資源', trigger: 'change' }
                    ],
                    desc: [
                        { required: true, message: '請填寫活動形式', trigger: 'blur' }
                    ],
                    person: [
                        { required: true, validator: validatePerson, trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            //表單提交驗證
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log('已通過驗證')
                        console.log(this.ruleForm)
                    }
                });
            },
            //清空輸入框
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

<style scoped>
    .demo-ruleForm {
        width: 500px;
    }
</style>

以上的代碼中包含了表單默認的驗證和自定義的驗證，model必須存在，它表示表單的內容存在哪個對象中。另外，對應el-form-item中，需要驗證里面嵌套的輸入框，外面使用required表示必填，里面再使用el-form-item和prop屬性驗證即可，上述的活動時間是個很好的例子。

2.驗證擴展

除了上述的方法指定字段為必填項外，還可以根據條件來控制某個字段是否為必填字段。

<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="必填項" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="動態必填項" prop="name2" :rules="isNeed?rules.name2:[]">
            <el-input v-model="ruleForm.name2"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
            <el-button @click="isNeed = true">必填</el-button>
            <el-button @click="isNeed = false">非必填</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        name: '',
        data() {
            return {
                isNeed: true,
                ruleForm: {},
                rules: {
                    name: [{
                        required: true,
                        message: '必填項不能為空',
                        trigger: 'blur'
                    }],
                    name2: [{
                        required: true,
                        message: '動態必填項不能為空',
                        trigger: 'blur'
                    }],
                }
            }
        },
        methods: {
            //表單提交驗證
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log('已通過驗證')
                        console.log(this.ruleForm)
                    }
                });
            },
        }
    }
</script>
<style>
</style>

 上述在需要動態驗證的字段上加上rules屬性，當條件為真時就進行指定的驗證，條件為假時就是空數組即不進行驗證。對於那種不同的條件必填項不同的情況非常的適用。

3.清除表單驗證

需要補充一點，表單的驗證也是可以清空的，它有自帶的清除方法：

this.$nextTick(() =>{
      this.$refs['ruleForm'].clearValidate()
})

4.input設置readonly時驗證

當把input設置為readonly時，通過其他的操作來給其賦值並驗證時，有一個坑。

<template>
    <div style="width: 300px;">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="ruleForm.name" :readonly="true">
                    <el-button slot="append" @click="setValue">賦值</el-button>
                </el-input>
            </el-form-item>
            <el-form-item label="年齡" prop="age">
                <el-input v-model.number="ruleForm.age"></el-input>
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        <el-button @click="resetForm('ruleForm')">取消</el-button>
        </el-form-item>
    </div>

</template>

<script>
    export default {
        name: '',
        data() {
            return {
                ruleForm: {},
                rules: {
                    name: { required: true, message: '請選擇', trigger: ['blur', 'change'] },
                    age: { required: true, message: '請輸入', trigger: 'blur' },
                }
            }
        },
        methods: {
            setValue() {
                this.ruleForm.name = "張三"
            },
            //表單提交驗證
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log('已通過驗證')
                        console.log(this.ruleForm)
                    }
                });
            },
            //清空輸入框
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
        components: {
        }
    }
</script>
<style>

</style>

上面的示例是點擊賦值按鈕給姓名賦值，若只點擊賦值，無論點擊多少次，文本框中都不會有值顯示，也不會驗證通過，但是當輸入年齡后，姓名就顯示出來並可以驗證通過。原因是在給表單設置初始值時ruleForm對象是一個空對象，那么在表單驗證時就不會通過。那么解決辦法就是給ruleForm設置屬性，而屬性的值為null，如下：

ruleForm: {
    name: null
},

這種設置在很多情況下都會用到。