element-ui之form表单校验的使用详解

先吐槽一下，个人感觉element-ui提供的文档写的太少，用的时候会踩很多坑。

如：表单验证方法传入的value没有值等。

下面，是我对element-ui form表单验证使用的总结，应该能解决大部分问题，或者，也可以直接拿过去修改使用。

（本文代码使用的是 vue.js + element-ui）

要写人名、年龄信息的表单校验（人的数量用户可自己增减）

1. el-form 上，model绑定的数据必须是json对象格式

（不一定说“必须”，只有是json对象格式的时候，element-ui提供的校验方法功能才完全可用）

2. el-form-item 上，prop绑定的值必须可以通过 . 的方式从el-form上的model绑定的对象中找到。

例： input绑定的是name，el-form上的model绑定的是formData，他们的关系是formData.list[0].name

所以，prop绑定的值应该是字符串：list[0].name

只有这样写，校验方法rule_name传入的value才是输入框中的值。

3. 提交按钮要写在el-form-item中，提交方法要用element-ui提供的方法，这样，element-ui会在提交前进行表单校验

下面是代码

<style scoped>
.align{
    display: flex;
    align-items: center;
}
.alignT{
    display: flex;
    align-items: flex-start;
}
.iconBtn{
    color: #409EFF;
    font-size: 26px;
    cursor: pointer;
}
</style>

<template>
    <div>
        <el-form :model="formData" ref="formData" status-icon style="width:100%;">
            <!-- 参数输入 -->
            <el-row>信息输入：</el-row>
            <el-row :gutter="30">
                <el-col :span="20">
                    <el-row 
                        :gutter="20" 
                        v-for="(item,index) in formData.list"
                        :key="index"
                        class="alignT spaceTop1">
                        <el-col :span=".5">
                            <i class="iconBtn" @click="listMethod(index)" :class="{'el-icon-circle-plus-outline': index == 0,'el-icon-remove-outline': index>0}" style="margin-top:6px;"></i>
                        </el-col>
                            <el-col :span="10">
                                <el-form-item :prop="'list[' + index + '].name'" :rules="{validator: rule_name,trigger: 'blur'}">
                                    <el-input placeholder="请输入名称" v-model="item.name" auto-complete="off"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item  :prop="'list[' + index + '].age'"  :rules="{validator: rule_age,trigger: 'blur'}">
                                    <el-input placeholder="请输入年龄" v-model="item.age" auto-complete="off"></el-input>
                                </el-form-item>
                            </el-col>
                    </el-row>
                </el-col>
            </el-row>

            <!-- 按钮 -->
            <el-row>
                <el-col :span=".5">
                    <el-form-item>
                        <el-button type="primary" @click="submit('formData')">提交</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: 'elementForm',            /* element-ui表单验证 */
        data() {
            return {
                formData: {
                    list: [{name: '',age: ''}]
                }
            };
        },
        mounted() {
        },
        methods: {
            // 表单增减操作
            listMethod(n) {
                if (n > 0) {
                    this.formData.list.splice(n,1);
                }else{
                    let o = {name: '',age: ''};
                    this.formData.list.push(o);
                };
            },
            // 姓名校验方法
            rule_name(rule,value,callback) {
                console.log(value);
                // 姓名不能为空
                if (!value) {
                    return callback(new Error('请输入姓名'));
                };
                callback();
            },
            // 年龄校验方法
            rule_age(rule,value,callback) {
                if (!value) {
                    return callback(new Error('请输入年龄'));
                };

                let n = Number(value);

                if (n < 1) {
                    return callback(new Error('年龄不能小于1岁'));
                };

                if (n > 200) {
                    return callback(new Error('年龄不能大于200岁'));
                };

                callback();
            },
            // 提交
            submit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (!valid) {
                        // 验证不通过禁止提交
                        console.log('验证不通过');
                        return false;
                    };

                    console.log('验证通过');
                });
            }
        }
    };
</script>

element-ui之form表单校验的使用详解

猜你喜欢