element-ui动态表单和验证

这篇具有很好参考价值的文章主要介绍了element-ui动态表单和验证。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在使用element-ui开发中,经常会用到对动态创建的表单进行字段验证,比如新增多个类似卡片的表单,里面的字段需要做验证,此时就要使用到动态表单验证,官方文档写的有示例,但是不够清晰。除了官方示例,还可以使用循环生成多个form实现该需求。

第一种官方示例:一个Form多项

下面以实际项目中的代码为例:

<el-form ref="form" :model="form" :rules="rules" label-width="110px" size="small" style="width: 90%;">
      <div v-for="(item, index) in form.list" :key="item.id" class="box-card">
            <el-form-item :prop=" 'list.' + index + '.maintUnit'" :rules="rules.maintUnit" label="运维单位">
              <SearchOpsDepartment :value.sync="item.maintUnit"></SearchOpsDepartment>
            </el-form-item>
            <el-form-item :prop=" 'list.' + index + '.userId'" :rules="rules.userId" label="运维人员">
              <SearchUsers :value.sync="item.userId"></SearchUsers>
            </el-form-item>
            <div>
              <el-button type="text" @click="handleAdd">添加</el-button>
              <el-button v-if="index !== 0" type="text" @click="handleDelete(index)">删除</el-button>
            </div>
      </div>
</el-form>

<script>
	data() {
        return {
            form: {
                list: [{ id: Date.now() }] // 这里添加了一个当前时间戳作为循环使用的key,如果使用index作为key,虽然避免的报错,但是对性能没有什么帮助,而且可能增加新能问题。
            },
            rules: {
                maintUnit: [
                    {
                        required: true,
                        message: '运维单位不能为空!',
                        trigger: ['change', 'blur']
                    }
                ],
                userId: [
                    {
                        required: true,
                        message: '运维人员不能为空!',
                        trigger: ['change', 'blur']
                    }
                ]
            }
        }
    }
</script>

注意重点

  • form表单里的 :model="form" :rules="rules"model和rules不能省略,而且这个model必须是个对象,虽然在当前例子里,我们的数据form其实就是一个数组,但是还要包裹一层成对象。
  • 每一项绑定prop时,一定要按照:prop=" 'list.' + index + '.maintUnit'"这种格式,list是需要循环的数组key名,一定不要写成form.list,也不是循环出的每一项item,index是每项的下标,maintUnit是当前字段key值。
  • 每一项必须单独绑定验证规则,如例子中的:rules="rules.maintUnit"
  • prop和当前字段的key值要保持一致,无论是动态表单还是静态表单都要保持一致
  • 验证规则不能用正则
  • 表单验验证时,一定要有默认值。比如form里的input绑定的是v-model="form.value"data里定义form时一定要要加value,如form: { value: '' }

第二种:多个form

<CardBox v-for="(item, index) in list" :key="index" :title="item.itemName">
    <el-form ref="form" :model="item" class="size-auto width-100" :rules="rules" :inline="true" size="medium" label-width="120px">
        
                <el-form-item label="计划工程量" prop="workAmount">
                    <el-input v-model.trim="item.workAmount" maxlength="15" clearable placeholder="支持小数点后2位" @change="handleComputed(item, index)" />
                </el-form-item>
                <el-form-item label="单价" prop="unitPrice">
                    <el-input v-model.trim="item.unitPrice" maxlength="50" show-word-limit clearable placeholder="请输入" @change="handleComputed(item, index)" />
                </el-form-item>
                <el-form-item label="计划完成金额" prop="prepareCompletionMoney" :rules="moneyRules(item.budgetContent.budgetMoney)">
                    <el-input v-model.trim="item.prepareCompletionMoney" disabled maxlength="15" clearable placeholder="支持小数点后2位">
                        <i slot="suffix" class="el-input__icon input-unit">元</i>
                    </el-input>
                </el-form-item>
                <el-form-item label="工作内容及标准">
                    <el-input v-model.trim="item.content" type="textarea" maxlength="200" show-word-limit clearable placeholder="请输入" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model.trim="item.remark" type="textarea" maxlength="200" show-word-limit clearable placeholder="请输入" />
                </el-form-item>
    </el-form>
</CardBox>
<script>
	data() {
        return {
            list: [],
            rules: {
                workAmount: [{ validator: this.validNum, trigger: 'blur' }],
                unitPrice: [{ validator: this.validNum, trigger: 'blur' }],
                adjustmentFactor: [{ validator: this.validNum, trigger: 'blur' }]
            }
        }
    },
    methods: {
        validNum(rule, value, callback) {
            if (value && !isNumber2(value)) {
                callback(new Error('填写格式错误'))
            } else {
                callback()
            }
        },
        moneyRules(budgetMoney) {
            return [{
                validator: (rule, value, callback) => this.validMoney(rule, value, callback, budgetMoney),
                trigger: 'change'
            }]
        },
        validMoney(rule, value, callback, budgetMoney) {
            if (value) {
                if (value > budgetMoney) {
                    callback(new Error('不能大于预算金额'))
                } else {
                    callback()
                }
            } else {
                callback()
            }
        },
        // 获取多个form验证结果
        handleValidate() {
            const list = []
            const validas = []
            this.$refs['form'].forEach((item, index) => {
                list.push(new Promise(resolve => {
                    item.validate(valida => {
                        validas.push(valida)
                        resolve()
                    })
                })
                )
            })
            Promise.all([...list]).then(() => {
                const res = !validas.some(item => item === false)
                return res
            }).catch(() => {
                return false
            })
        }
    }
</script>

复杂表单的验证

很多时候会遇到其中一个值,需要当前项的某个值做验证,如上第二种表单中,要求计划完成金额不能大于预算量,这里有两种实现方式

1、通过 rule.field获取到当前项下标,只适用第一种动态表单;

validEverydayBudgetAmount(rule, value, callback) {
    if (value) {
        if (!isNumber2(value)) {
            callback(new Error('填写格式错误'))
            return
        }
        // rule.field转为数组后第二个就是下标
        const index = rule.field.split('.')[1]
        const budgetAmount = this.everydayCost[index].budgetAmount
        if (value > budgetAmount) {
            callback(new Error(`不能大于总预算量${budgetAmount}`))
        } else {
            callback()
        }
    } else {
        callback()
    }
},

2、把验证规则写在item行内,这样就可以通过传参获取当前项值;

<el-form-item label="计划完成金额" prop="prepareCompletionMoney" :rules="moneyRules(item.budgetContent.budgetMoney)">
// 验证规则见第二种表单的示例代码

获取验证结果

第二种多个form的,验证结果获取较为麻烦,因为每个验证都是异步,这里使用promise方式获取。父组件获取验证结果时,调用子组件内handleValidate方法,通过then或者await获取结果即可。文章来源地址https://www.toymoban.com/news/detail-431597.html

// 获取多个form验证结果,具体参考第二种form代码
handleValidate() {
    const list = []
    const validas = []
    this.$refs['form'].forEach((item, index) => {
        // 把单个验证结果处理为promise函数,然后添加到list中
        list.push(new Promise(resolve => {
            item.validate(valida => {
                validas.push(valida)
                resolve()
            })
        })
        )
    })
    // 通过Promise.all等待几个验证都完成再处理
    return Promise.all([...list]).then(() => {
        const res = !validas.some(item => item === false)
        return res
    }).catch(() => {
        return false
    })
}

到了这里,关于element-ui动态表单和验证的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element-ui 动态表单

    背景:朋友入职新公司,做项目重构,根据后端返回表单内容,动态生成表单,于是自己实现了下,哪里写的不好,欢迎各位提建议: 因为开关和多选框默认值是非空字符串,所以在created生命周期单独处理了下

    2024年02月11日
    浏览(85)
  • 解决Element-UI清空表单及验证不生效的问题

    由于我将编辑与新增时,表单使用的是同一个data中的数据,这就导致出现了我点击了编辑后,再次点击新增时,出现了数据依旧是刚才编辑表单中的数据。 通过 手动给表单中的字段赋值 ,期初时,能达到清除表单的效果,但是又出现了新的问题。 表单验证不通过。在一打

    2024年02月13日
    浏览(44)
  • 动态绑定表单的rules---element-ui

    在 Vue 3 中,你可以使用  refs  属性与  v-model  指令来动态绑定表单数据和验证规则。要动态删除绑定的验证规则,可以通过修改  ref  的 $rules 属性来实现。 例如,假设你有一个简单的表单组件,它使用  ref  来绑定表单数据和验证规则: 如果要动态删除  rules.name  的验

    2024年02月15日
    浏览(43)
  • element-ui表单动态添加必填校验

    业务场景:根据form表单中的某些下拉框选中值,动态切换一些属性的必填校验。 效果图: 当活动区域非必填时,活动名称取消必填校验,否则活动名称必填。

    2024年02月11日
    浏览(49)
  • Element-UI可以动态生成的form表单

    此form表单每一项绑定的值组成一个对象,对象叠加组成了一个对象数组,循环对象数组生成form的表单项。当点击新增一项时,其实就是给form表单对象数组添加一个对象,删除则反之。值得注意的是,由于动态表单得到的是一个对象数组,但我们需要的是表单的值组成的对象

    2024年02月11日
    浏览(52)
  • element-ui form表单的动态rules校验

    在vue 项目中,有时候可能会用到element-ui form表单的动态rules校验,比如说选择了哪个选项,然后动态显示或者禁用等等。 我们可以巧妙的运用element-ui form表单里面form-item想的校验规则来处理(每一个form-item项都可以单独校验)。 上代码: 重点是这个: :rules=“sqyxForm.jtpslx

    2024年02月15日
    浏览(52)
  • 【element-ui】form表单动态修改rules校验项

    在项目开发过程中,该页面有暂存和提交两个按钮,其中暂存和提交必填项校验不一样,此时需要动态增减必填项校验 ,解决方法如下: 增加rules校验项 删除rules校验项

    2024年02月04日
    浏览(61)
  • Element UI 表单验证规则动态失效问题

    Element 版本:v2.15.3 如下代码所示:有一个上传文件的 input 组件,在更新的时候,如果不上传文件表示不更新,如果要更新则点击 「重新上传」按钮将上传组件显示出来 也就是如上图:不更新的话,该字段不是必须的,提交的时候就不会被校验,如果更新的话,就要让这个字

    2024年02月08日
    浏览(44)
  • Vue+Element-UI el-form表单动态检验

    业务需求: 表单el-form 有一表单项:发布时间 ,有5个选项:今天、24小时、近3天、近7天和自定义时间,其中当选择自定义时间时,后面跟着的日期时间选择器是必填的,选中其他选项时则不需要。这就需要做到表单的动态检验。 最开始实现方式是在当前表单项中设置规则

    2024年02月11日
    浏览(58)
  • Vue + Element ui 实现动态表单,包括新增行/删除行/动态表单验证/提交功能

    原创/朱季谦 最近通过Vue + Element ui实现了动态表单功能,该功能还包括了动态表单新增行、删除行、动态表单验证、动态表单提交功能,趁热打铁,将开发心得记录下来,方便以后再遇到类似功能时,直接拿来应用。 简化的页面效果图如下: 最开始,我是用了纯粹的表格形

    2024年02月04日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包