Element多个表单验证

最近刚开始接触饿了吗组件,各种还是挺好用的,不过也有一些使用在文档是没有说全的,网上也比较少案例,以下是一个多表单验证的Demo。

需求如下图:点击提交时候要对n个表单进行验证。

    <div id="app">
        <div v-for="(item,index) in Data">
            <el-form :model="item" :ref="'ValidateForm'" class="demo-ruleForm" :rules="rules">
                <el-form-item label="密码" prop="pass">
                    <el-input type="password" v-model="item.pass" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input type="password" v-model="item.checkPass" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
        </div>
    </div>

首先,用官方的简单的单表单验证如下:


        <el-form :model="Data[0]" :ref="'ValidateForm'" class="demo-ruleForm" :rules="rules">
            <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="Data[0].pass" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="Data[0].checkPass" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="submitForm('ValidateForm')">提交</el-button>


可以看到,this.$refs[formName]获取到的是一个对象。

所以多个表单的时候,我的想法是ref=‘ValidateForm+index’,然后遍历this.$refs[formName+index]后发现,得到的却是数组,而不再是对象。


如次,我将验证代码改为如下即可:

                submitForms(formName) {
                    for (var i = 0; i < this.Data.length; i++) {
                        this.$refs[formName+i][0].validate((valid) => {
                            if (valid) {
                                console.log('验证成功!');
                            } else {
                                console.log('error submit!!');
                            }
                        });
                    }
                },

既然在for循环的多个表单this.$refs[formName]会变成数组,那ref=‘ValidateForm’也是个数组,果不其然:


这样看来,使用同一个ref的值更好。

需求上,因为确认密码要和当前form的密码做比较,而自定义验证方法中的参数并没有当前表单其他的值,而又无法知道当前表单是第几个。所以我使用一个属性SelectedIndex来用来存储当前验证的窗体下标,解决了此问题。

                var validatePass = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value !== this.Data[this.SelectedIndex].pass) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                };

                submitForms(formName) {
                    for (var i = 0; i < this.Data.length; i++) {
                        this.SelectedIndex = i;
                        this.$refs[formName][i].validate((valid) => {
                            if (valid) {
                                console.log('验证成功!');
                            } else {
                                console.log('error submit!!');
                            }
                        });
                    }
                },

全部代码:

    <div id="app">
        <div v-for="(item,index) in Data">
            <el-form :model="item" :ref="'ValidateForm'" class="demo-ruleForm" :rules="rules">
                <el-form-item label="密码" prop="pass">
                    <el-input type="password" v-model="item.pass" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input type="password" v-model="item.checkPass" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <el-button type="primary" @click="submitForms('ValidateForm')">提交</el-button>
        <el-form :model="Data[0]" :ref="'ValidateForm'" class="demo-ruleForm" :rules="rules">
            <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="Data[0].pass" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="Data[0].checkPass" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="submitForm('ValidateForm')">提交</el-button>
    </div>
    <script>
        var vue = new Vue({
            el: '#app',
            data() {
                var validatePass = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value !== this.Data[this.SelectedIndex].pass) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                };
                return {
                    Data: [
                        {
                            pass: '',
                            checkPass: '',
                        },
                        {
                            pass: '',
                            checkPass: '',
                        },
                        {
                            pass: '',
                            checkPass: '',
                        }
                    ],
                    rules: {
                        checkPass: [
                            { validator: validatePass, trigger: 'blur' }
                        ]
                    },
                    SelectedIndex: 0
                }
            },
            methods: {
                submitForms(formName) {
                    for (var i = 0; i < this.Data.length; i++) {
                        this.SelectedIndex = i;
                        this.$refs[formName][i].validate((valid) => {
                            if (valid) {
                                console.log('验证成功!');
                            } else {
                                console.log('error submit!!');
                            }
                        });
                    }
                },
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            console.log('验证成功!');
                        } else {
                            console.log('error submit!!');
                        }
                    });
                },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                }
            }
        });
    </script>


评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值