校验表格里的表单

已于 2023-06-08 23:55:46 修改
阅读量113 收藏
点赞数 1
文章标签： servlet vue.js javascript
于 2023-06-08 17:05:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49035434/article/details/131111897
版权
文章展示了Vue2和Vue3中创建表单的代码示例，包括el-form、el-dialog、el-input等组件的使用，以及表单验证的规则设置。同时，指出了在Vue2.7中使用ref时遇到的问题，即ref不再默认创建响应式数据，而是一个组件实例，强调了在命名ref时避免与属性名冲突的规则。
摘要由CSDN通过智能技术生成

vue2写法

<template>
    <el-dialog
        title="收货地址"
        :visible.sync="dialogFormVisible"
    >
        {{ form }}
        <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="100px"
        >
            <el-form-item
                label="活动名称"
                prop="name"
            >
                <el-input
                    v-model="form.name"
                    autocomplete="off"
                />
            </el-form-item>

            <el-form-item
                label="活动区域"
                prop="region"
            >
                <el-select
                    v-model="form.region"
                    placeholder="请选择活动区域"
                >
                    <el-option
                        label="区域一"
                        value="shanghai"
                    />
                    <el-option
                        label="区域二"
                        value="beijing"
                    />
                </el-select>
            </el-form-item>

            <el-form-item
                label="活动性质"
                prop="type"
            >
                <el-checkbox-group v-model="form.type">
                    <el-checkbox
                        label="美食/餐厅线上活动"
                        name="type"
                    />
                    <el-checkbox
                        label="地推活动"
                        name="type"
                    />
                    <el-checkbox
                        label="线下主题活动"
                        name="type"
                    />
                    <el-checkbox
                        label="单纯品牌曝光"
                        name="type"
                    />
                </el-checkbox-group>
            </el-form-item>

            <el-button @click="handleAdd">
                添加
            </el-button>

            <el-table
                :data="form.tableData"
                style="width: 100%"
            >
                <el-table-column
                    label="日期"
                    width="180"
                >
                    <template slot-scope="scope">
                        <el-form-item
                            :prop="`tableData.${scope.$index}.date`"
                            label-width="0px"
                            :rules="rules.date"
                        >
                            <el-date-picker
                                v-model="scope.row.date"
                                type="date"
                                placeholder="选择日期"
                            />
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    label="姓名"
                    width="180"
                >
                    <template slot-scope="scope">
                        <el-form-item
                            label-width="0px"
                            :prop="`tableData.${scope.$index}.compellation`"
                            :rules="rules.compellation"
                        >
                            <el-input v-model="scope.row.compellation" />
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    label="年龄"
                    width="180"
                >
                    <template slot-scope="scope">
                        <el-form-item
                            :prop="`tableData.${scope.$index}.age`"
                            label-width="0px"
                            :rules="rules.age"
                        >
                            <el-input v-model="scope.row.age" />
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
        <div
            slot="footer"
            class="dialog-footer"
        >
            <el-button @click="dialogFormVisible = false">
                取 消
            </el-button>
            <el-button
                type="primary"
                @click="confirmDialogFormVisible"
            >
                确 定
            </el-button>
        </div>
    </el-dialog>
</template>

<script>

export default {
    data() {
        return {
            dialogFormVisible: true,
            form: {
                name: '',
                region: '',
                type: [],
                tableData: [{
                    date: '',
                    compellation: '',
                    age: '',
                }, {
                    date: '',
                    compellation: '',
                    age: '',
                }],
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    {
                        min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur',
                    },
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' },
                ],
                type: [
                    {
                        type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change',
                    },
                ],
                date: [
                    { required: true, message: '请选择日期', trigger: 'change' },
                ],
                compellation: [
                    { required: true, message: '请输入姓名', trigger: 'change' },
                ],
                age: [
                    { required: true, message: '请输入年龄', trigger: 'change' },
                ],
            },
        };
    },
    methods: {
        handleAdd() {
            this.form.tableData.push({
                date: '',
                compellation: '',
                age: '',
            });
        },

        handleDelete(index, row) {
            // console.log(index, row);
        },

        confirmDialogFormVisible() {
            this.$refs.form.validate();
        },
    },
};
</script>

vue3写法

<template>
    <el-dialog
        title="收货地址"
        :visible.sync="dialogFormVisible"
    >
        <el-form
            ref="rulesFormRef"
            :model="form"
            :rules="rules"
            label-width="100px"
        >
            <el-form-item
                label="活动名称"
                prop="name"
            >
                <el-input
                    v-model="form.name"
                    autocomplete="off"
                />
            </el-form-item>

            <el-form-item
                label="活动区域"
                prop="region"
            >
                <el-select
                    v-model="form.region"
                    placeholder="请选择活动区域"
                >
                    <el-option
                        label="区域一"
                        value="shanghai"
                    />
                    <el-option
                        label="区域二"
                        value="beijing"
                    />
                </el-select>
            </el-form-item>

            <el-form-item
                label="活动性质"
                prop="type"
            >
                <el-checkbox-group v-model="form.type">
                    <el-checkbox
                        label="美食/餐厅线上活动"
                        name="type"
                    />
                    <el-checkbox
                        label="地推活动"
                        name="type"
                    />
                    <el-checkbox
                        label="线下主题活动"
                        name="type"
                    />
                    <el-checkbox
                        label="单纯品牌曝光"
                        name="type"
                    />
                </el-checkbox-group>
            </el-form-item>

            <el-button @click="handleAdd">
                添加
            </el-button>

            <el-table
                :data="form.tableData"
                style="width: 100%"
            >
                <el-table-column
                    label="日期"
                    width="180"
                >
                    <template slot-scope="scope">
                        <el-form-item
                            :prop="`tableData.${scope.$index}.date`"
                            label-width="0px"
                            :rules="rules.date"
                        >
                            <el-date-picker
                                v-model="scope.row.date"
                                type="date"
                                placeholder="选择日期"
                            />
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    label="姓名"
                    width="180"
                >
                    <template slot-scope="scope">
                        <el-form-item
                            label-width="0px"
                            :prop="`tableData.${scope.$index}.compellation`"
                            :rules="rules.compellation"
                        >
                            <el-input v-model="scope.row.compellation" />
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column
                    label="年龄"
                    width="180"
                >
                    <template slot-scope="scope">
                        <el-form-item
                            :prop="`tableData.${scope.$index}.age`"
                            label-width="0px"
                            :rules="rules.age"
                        >
                            <el-input v-model="scope.row.age" />
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
        <div
            slot="footer"
            class="dialog-footer"
        >
            <el-button @click="dialogFormVisible = false">
                取 消
            </el-button>
            <el-button
                type="primary"
                @click="confirmDialogFormVisible"
            >
                确 定
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
import {
    defineComponent, reactive, getCurrentInstance,
} from 'vue';

export default defineComponent({
    setup() {
        const { proxy } = getCurrentInstance();
        const init = reactive({
            dialogFormVisible: true,
            form: {
                name: '1',
                region: '',
                type: [],
                tableData: [{
                    date: '',
                    compellation: '',
                    age: '',
                }, {
                    date: '',
                    compellation: '',
                    age: '',
                }],
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    {
                        min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur',
                    },
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' },
                ],
                type: [
                    {
                        type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change',
                    },
                ],
                date: [
                    { required: true, message: '请选择日期', trigger: 'change' },
                ],
                compellation: [
                    { required: true, message: '请输入姓名', trigger: 'change' },
                ],
                age: [
                    { required: true, message: '请输入年龄', trigger: 'change' },
                ],
            },
        });

        const handleAdd = () => {
            init.form.tableData.push({
                date: '',
                compellation: '',
                age: '',
            });
        };

        const confirmDialogFormVisible = () => {
            proxy.$refs.rulesFormRef.validate();
        };

        const handleDelete = (index) => {
            init.form.tableData.splice(index, 1);
        };

        return {
            ...init,
            handleAdd,
            confirmDialogFormVisible,
            handleDelete,
        };
    },
});
</script>

在vue2.7中一开始是这样写的.

 结果输入的时候控制台报错了. 

vue2.7使用ref有个小坑:

vue2.7，把ref默认当作一个template可使用的属性了

        在vue2.7中ref, 是作为组件加载完毕的一个实例引用, 那么form就不是一个响应式

        而是一个el-form的实例.

一般ref和属性不要重复

ref明确规则  业务+ref

weixin_49035434
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue表格表单输入框校验
ghx123456ghx的博客
04-13 602
vue table表格输入框校验
el-table表格内置表单校验
06-11
vue实现：element-ui组件实现el-table表格包含输入框、选择框等组件并实现表单的校验
vue+elementUI动态表格式表单校验
全易
04-12 1631
<template> <el-form v-show="show" :inline="true" :model="ruleForm" :rules="ruleFormRules" ref="ruleForm" > <div class="d-flex justify-content-between align-bottom"> <el-form-item label="小时服务费" prop="to
表格数据——表单校验
Connie_wuxx的博客
03-26 310
表单的校验与校验清除
表格嵌套表单的校验
weixin_41897680的博客
09-02 1211
推荐文章：vue+ElementUI 表单嵌套表格逐行校验（新增、编辑）的完美解决方案 文章里写的很详细，就不多介绍。这里写了一个简单的demo，主要标准一下注意点。 <template> <div> <el-button type="primary" @click="visible=true">新增</el-button> <el-dialog title="新增" v-model="visible" width="5
element表格使用表单校验
UUID、
01-04 2089
哈喽，最近公司都在赶项目在做的过程中也踩了不少的坑。现在来记录下产品的需求：需要在表格中修改内容，并且对填入的数据进行校验后通过才可提交。我最终完成的效果如下图（主要涉及到表单的校验和表格行列合并）： 主要思路 表单验证主要是通过 el-form的model 属性绑定对象 结合 el-form-item的prop和rules属性 外加 el-input的v-model绑定的值来进行触发验证。（其中 prop 的值是绑定v-model值的字段名，必须对应上否则无法触发 ） 问题1： 后端返回的数据是数组中
校验表格中的多个表单
weixin_49035434的博客
06-02 1084
校验表格中的输入框, 输入框可添加
form表单 在表格中校验
LJJONESEED的博客
04-15 149
【代码】form表单 在表格中校验。
表格表单校验table-input
qq_42103673的博客
09-30 442
表格表单校验table-input
表格中批量校验每行的某些单元格的表单校验
weixin_44361375的博客
06-05 269
3、保存的时候和正常的form表单校验一样，toast顶部提示，单元格会标红。1、表格外面套一个form表单来实现批量校验。2 、定义的data部分。
vue elementUI 表单校验功能之数组多层嵌套
12-08
Element UI的`el-form`组件提供了一套强大的表单验证机制，使得前端开发者能够方便地实现数据校验。然而，在处理复杂的数据结构，特别是涉及到数组和多层嵌套时，表单校验可能会变得相当棘手。本篇文章将详细介绍...
el-table树形表格表单验证(列表生成序号)
11-20
总结起来，`el-table`树形表格表单验证涉及到以下关键点： 1. **树形列表序号生成**：通过广度优先遍历，为每个节点分配层次结构的唯一序号。 2. **表单结构**：使用`el-form`和嵌套的`el-form-item`包裹表格，确保...
Vue前端路由详解——以Ruoyi框架为案例学习
警警的博客
09-03 1052
Ruoyi框架前端路由通过Vue Router实现，支持静态路由和动态路由的配置，通过路由守卫实现权限控制等需求，采用路由懒加载提高应用性能，并通过路由元信息存储自定义信息。这些特性共同构成了Ruoyi框架前端路由的完整体系，为开发者提供了灵活、强大的路由管理能力。
el-table el-table-column表头嵌套循环数据
林中明月间丶
09-04 382
【代码】el-table el-table-column表头嵌套循环数据。
Vue2 中对数组进行操作时需要注意什么
最新发布
m0_73882020的博客
09-06 477
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
GoFly企业版里的阿里图标如何增加自定义图标到后台
GoFLy开发者的博客
09-04 522
（3）将生成好的图标复制.js文件放到项目index.html文件中。（1）配置 FontClass/Symbol 前缀为：svgfont-（2）配置 Font Family 为 iconfont。在使用位置的组件，返回图标名称。
在 Vue 中实现跨项目数据传递
世轩的博客
09-03 1451
需要注意的是，跨项目数据传递可能会带来一些安全和数据一致性的问题。在实际应用中，要根据具体情况选择合适的方法，并确保数据的安全性和可靠性。同时，对于敏感数据，应该采取加密等安全措施。
开发适合el-dialog的拉伸拖拽自定义指令和适配自定义的图片查看组件
鹤渺的星球
09-05 1343
我之前有开发过一个图片查看的组件，这个组件可在单页面打开，也可以在弹窗里打开，但是弹窗因为是比较固定，所以有一些局限性，只能拖拽，不能改变弹窗大小，于是有了开发【可以拖拽改变大小的弹窗】组件。通过自定义指令，实现弹窗的移动拖拽拉伸等功能动态计算弹窗的位置与尺寸，因为弹窗的位置和尺寸是动态计算的，涉及到鼠标的实时位置和弹窗初始位置之间的关系。代码也贴上去了，仅供参考。
iview 表格内表单校验
09-06
iview是一款基于Vue.js的UI组件库，提供了丰富的表格组件和表单校验功能。 在iview的表格组件中，可以使用表单校验功能来对每一行或特定列的数据进行校验。可以根据需要设置表格的rules属性来定义校验规则。 首先...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值