多个el-form表单统一校验

需求

Vue 2项目中,由于一个页面存在多个的表单,如下代码:

<template>
  <div>
    <el-form ref="form1" :rules="rules1">
      <!-- 表单内容 -->
    </el-form>
    <el-form ref="form2" :rules="rules2">
      <!-- 表单内容 -->
    </el-form>
    <el-button @click="submit">提交</el-button>
  </div>
</template>

然后,在对这些表单进行校验的时候可能会导致回调地狱,如下代码:

submit(){
    this.$refs.form1.validate(valid1=>{
        if(valid1){
            this.$refs.form2.validate(valid2=>{
                if(valid2) {
                    //...
                }
            })
        }
    })
}

解决思路

首先,我看了下别人的思路,但和我想要的效果不大一样,而关于回调地狱的解决方案自然就是Promise.all()的方式了。

submit(){
    Promise.all([
        new Promise(resolve => this.$refs.form1.validate(v=>resolve(v))),
        new Promise(resolve => this.$refs.form2.validate(v=>resolve(v)))
    ]).then(([v1, v2]) => {
        console.debug(v1 , v2);
        //v1 , v2返回Boolean值
        if (v1 && v2) {
            //...
        }
    })
}

这么做从代码量上来说可能没有别人的精简,但是至少我能知道每个表单的校验结果(v1, v2),也能满足校验多个表单的目的。当然还有其它几种写法详见扩展。

扩展

this.$refs.form1.validate()在没有加callback的时后返回的就是一个Promise对象,并且如果直接在Promise.all里面放this.$refs.form1.validate()时,一但校验不通过控制台就会出现错误日志(Uncaught (in promise)),原因是没有对异常做处理。所以也就有另一种写法:

submit(){
    Promise.all([
        this.$refs.form1.validate().then(v=>v,()=>false),
        //在then中处理异常,返回false
        this.$refs.form2.validate().then(v=>v,()=>false)
    ]).then(([v1, v2]) => {
        //v1 , v2为Boolean值
        console.debug(v1 , v2);
        if (v1 && v2) {
            //...
        }
    })
}

最后,如果想要在校验失败的时候,然会具体的校验失败信息还能这么写:

submit(){
    Promise.all([
        this.$refs.form1.validate().then(v=>v,e=>e),
         //在then中处理异常,返回对象
        this.$refs.form2.validate().then(v=>v,e=>e)
    ]).then(([v1, v2]) => {
        //v1 , v2为Boolean值或者对象
        console.debug(v1 , v2);
        //这时候假设form1校验失败,那么v1返回的就是一个对象,就像这样:
        //"username": [{"message": "请输入用户名称","field": "username"}]}
        if (v1 && v2) {
            //...
        }
    })
}

或者这么写:

submit(){
    Promise.all([
        this.$refs.form1.validate(),
        this.$refs.form2.validate()
    ]).then(() => {
        //这时候的then就无所谓传进来的值了,因为只有两个都校验通过才会到这个地方来
        //...
    }).catch(e=>{
        console.debug(e)
        //但凡有一个校验失败就会进入到这里,e无法甄别是来自哪个form,如果需要可以在validate().catch中加入可以甄别的值以便判断,这里就展开了
        //...
    })
}
  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
对于el-form多层校验,可以使用自定义校验规则来实现。具体步骤如下: 1. 在el-form中设置ref属性,方便在代码中获取数据和进行校验。 2. 在项中设置prop属性,用于在校验规则中引用该项数据。 3. 在el-form中设置rules属性,为每个项设置校验规则。 4. 在自定义校验规则中,通过this.$refs.form.validate()方法来触发校验。 以下是一个示例代码: ``` <template> <el-form ref="form" :model="form" :rules="rules"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model.number="form.age"></el-input> </el-form-item> <el-form-item label="联系方式"> <el-form ref="contactForm" :model="form.contact" :rules="contactRules"> <el-form-item label="电话" prop="phone"> <el-input v-model="form.contact.phone"></el-input> </el-form-item> <el-form-item label="邮箱" prop="email"> <el-input v-model="form.contact.email"></el-input> </el-form-item> </el-form> </el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form> </template> <script> export default { data() { return { form: { name: '', age: '', contact: { phone: '', email: '' } }, rules: { name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ], age: [ { required: true, message: '请输入年龄', trigger: 'blur' }, { type: 'number', message: '年龄必须为数字值', trigger: 'blur' } ] }, contactRules: { phone: [ { required: true, message: '请输入电话号码', trigger: 'blur' } ], email: [ { required: true, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '邮箱地址格式不正确', trigger: ['blur', 'change'] } ] } } }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { // 校验通过,提交数据 } else { // 校验不通过,提示错误信息 } }) } } } </script> <style> /* 样式省略 */ </style> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值