vue实现多个el-form表单提交统一校验的2个方法,
3672Js.Com2023-07-15 00:21 来源:未知 阅读:6141 关注度5
vue实现多个el-form表单提交统一校验的2个方法,
目录
- 1. 定义模板内容
- 2. 方法一
- 3. 方法二
- 总结
通过以下两种方法实现多个表单的统一校验:
1. 定义模板内容
在 el-form 表单中添加 ref 属性来获取表单组件对象
<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>
2. 方法一
在上述代码中,我们给每个 el-form 表单添加了 ref 属性,分别为 form1 和 form2,在 submit 方法中,分别对两个表单使用 validate 方法进行表单校验
export default { data() { return { form1: {}, form2: {}, rules1: {}, rules2: {} } }, methods: { submit() { const form1Valid = this.$refs.form1.validate() const form2Valid = this.$refs.form2.validate() if (form1Valid && form2Valid) { // 统一提交表单 } } } }
3. 方法二
在上述代码中,我们给每个 el-form 表单添加了 ref 属性,在 submit 方法中,遍历 formRefs 表单数组,依次对每个表单进行校验
export default { data() { return { // 数组用来存储所有表单的 ref 值 formRefs: [ 'form1', 'form2' ], form1: {}, form2: {}, rules1: {}, rules2: {} } }, methods: { submit() { // 标记所有表单是否通过校验的变量 let isValid = true // 遍历表单数组,依次对每个表单进行校验 this.formRefs.forEach(ref => { this.$refs[ref].validate(valid => { if (!valid) { isValid = false } }) }} // 如果所有表单都校验通过,执行提交操作 if (isValid) { // 执行提交操作 } } } }
总结
到此这篇关于vue实现多个el-form表单提交统一校验的2个方法的文章就介绍到这了,更多相关vue el-form表单提交统一校验内容请搜索3672js教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持3672js教程!
您可能感兴趣的文章:- el-form的model、prop属性和表单校验等使用
- v-for中动态校验el-form表单项的实践
- vue中的el-form表单rule校验问题(特殊字符、中文、数字等)
- 使用el-form之表单校验自动定位到报错位置问题
- vue之el-form表单校验以及常用正则详解
- elementUI动态嵌套el-form表单校验举例详解
本站文章为3672js教程网友分享投稿,版权归原作者,欢迎任何形式的转载,但请务必注明出处。同时文章内容如有侵犯了您的权益,请联系我们处理。
评论已被关闭