解决vue表单为空也能提交的问题

2024-04-02 19:04:59 754人浏览薄情痞子

摘要

目录Vue表单为空也能提交大概是这样写的vue的表单提交方式vue表单收集和提交vue表单为空也能提交今天在用Vue写表单验证的时候，习惯性把v-model绑定的值设置为null，

vue表单为空也能提交

今天在用Vue写表单验证的时候，习惯性把v-model绑定的值设置为null，然后再测试的时候，发现如果填写了表单后，又删除输入的内容，竟然能提交上去，百思不得其解。

最后通过vue devtools这个工具找到了问题所在。

大概是这样写的

<input v-model="ipt"  />
data () {
    return {
        ipt: null,
    }
}
if(this.ipt !== null) {
    axiOS.post()...
}

研究了老半天，最后通过vue工具发现最初设置ipt的值为null，当表单输入内容，又删除之后，虽然内容不见了，但是ipt的值变为了''，这样就不能通过简单的!== nulll来判断了。

if(this.ipt !== null &&  this.ipt) {
    axios.post()...
}

vue的表单提交方式

每次做项目都会用，也会踩一些坑，这里统一整理一下，当个模板用

vue表单收集和提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta Http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <fORM :model="form" @submit.prevent="submit">
            <div>
                <label>用户名
                    <input v-model.trim="form.username" type="text" placeholder="请输入用户名">
                </label>
            </div>
            <div>
                <label>密码
                    <input v-model="form.passWord" type="password" placeholder="请输入密码">
                </label>
            </div>
            <div>
                <label>头像<input type="file" @change="handleChange"></label>
            </div>
            <div>
                <label>姓名
                    <input v-model.trim="form.name" type="text" placeholder="请输入您的姓名">
                </label>
            </div>
            <div>
                <label>性别
                    <label><input v-model="form.sex" type="radio" name="sex" value="male">男</label>
                    <label><input v-model="form.sex" type="radio" name="sex" value="female">女</label>
                </label>
            </div>
            <div>
                <label>年龄
                    <input type="number" v-model.number="form.age" placeholder="请输入年龄">
                </label>
            </div>
            <div>
                <label>爱好
                    <label>
                        <input v-model="form.hobby" type="checkbox" value="study">学习
                    </label>
                    <label>
                        <input v-model="form.hobby" type="checkbox" value="games">打游戏
                    </label>
                    <label>
                        <input v-model="form.hobby" type="checkbox" value="eat">吃饭
                    </label>
                </label>
            </div>
            <div>
                <label>所属校区
                    <select v-model="form.campus">
                        <option value="beijing">北京</option>
                        <option value="shanghai">上海</option>
                        <option value="shenzhen">深圳</option>
                        <option value="wuhan">武汉</option>
                    </select>
                </label>
            </div>
            <div>
                <label>其他信息
                    <textarea v-model.lazy="form.other" style="vertical-align: middle;" cols="30" rows="10"></textarea>
                </label>
            </div>
            <div>
                <label>
                    <input v-model="form.accept" type="checkbox">
                    阅读并接受<a href="http://www.baidu.com" rel="external nofollow" >《用户协议》</a>
                </label>
            </div>
            <div>
                <button>提交</button>
            </div>
        </form>
    </div>
    <script src="lib/vue.js"></script>
    <script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#app',
            data() {
                return {
                    form: {
                        hobby: []
                    },
                    image: {}
                }
            },
            methods: {
                submit() {
                    console.log(this.form);
                    //在这里进行上传（axios、ajax）
                },
                handleChange(event) {
                    let file = event.target.files[0]
                    this.form.image = file
                }
            },
        })
    </script>
</body>
</html>

上述代码有三点需要说明

在<form>标签中出现了:model="form"，这是为了将form中的各项数据动态收集到vue的data中的form对象中，方便统一管理
form标签上的@submit.prevent为提交时阻止表单的默认行为（跳转）
v-model.trim是将输入的数据去除前后的空格；v-model.number是转换为Number类型；v-model.lazy是失去焦点后再把数据渲染到页面上

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。

--结束END--

本文标题: 解决vue表单为空也能提交的问题

本文链接: https://lsjlt.com/news/150343.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

猜你喜欢

解决vue表单为空也能提交的问题

目录vue表单为空也能提交大概是这样写的vue的表单提交方式vue表单收集和提交vue表单为空也能提交今天在用Vue写表单验证的时候，习惯性把v-model绑定的值设置为null，...

99+

2024-04-02
vue表单为空也能提交的问题如何解决

这篇文章主要讲解了“vue表单为空也能提交的问题如何解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue表单为空也能提交的问题如何解决”吧！vue表单为空也能提交今天在用Vue写表单验证...

99+

2023-06-30
redis表单重复提交问题怎么解决

解决 Redis 表单重复提交问题可以通过以下几种方式：1. 使用 Redis 的原子性操作：在提交表单时，先通过 Redis 的 ...

99+

2023-09-11

redis
vue如何解决form表单提交但不跳转页面的问题

这篇文章将为大家详细讲解有关vue如何解决form表单提交但不跳转页面的问题，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。vue使用@submit.prevent=&qu...

99+

2024-04-02
redis分布式锁解决表单重复提交的问题

假如用户的网速慢，用户点击提交按钮，却因为网速慢，而没有跳转到新的页面，这时的用户会再次点击提交按钮，举个例子：用户点击订单页面，当点击提交按钮的时候，也许因为网速的原因，没有跳转到...

99+

2024-04-02
如何解决vue+elementUI复杂表单的验证、数据提交方案问题

小编给大家分享一下如何解决vue+elementUI复杂表单的验证、数据提交方案问题，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！当我们在做后台管理系统时，经常会遇到非常复杂的表单：表单项...

99+

2024-04-02
域名列表不能为空问题怎么解决

如果您在创建域名列表时遇到“域名列表不能为空”的问题，请检查以下几点：1. 您是否正确输入了域名列表。请确保每个域名之间用逗号或换行...

99+

2023-06-10

域名列表域名
redis分布式锁如何解决表单重复提交的问题

本篇文章为大家展示了redis分布式锁如何解决表单重复提交的问题，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。假如用户的网速慢，用户点击提交按钮，却因为网速慢，而没有跳转到新的页面，这时的用户会再次...

99+

2023-06-21
php表单提交不能接收如何解决

这篇文章主要讲解了“php表单提交不能接收如何解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“php表单提交不能接收如何解决”吧！php表单提交不能接收的解决办法：1、打开php.ini配...

99+

2023-07-04
如何解决Ajax提交Form表单页面仍会刷新的问题

小编给大家分享一下如何解决Ajax提交Form表单页面仍会刷新的问题，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！搞了半天原来点...

99+

2024-04-02
解决Javaweb 提交表单到servlet时出现空白页面,但网站不报错问题

目录问题描述截图如下解决方法立马见效javaweb后端调用servlet出现空白例如问题描述提交表单到servlet时出现空白页面，但又网站不报错截图如下遇到这个问题查找了很...

99+

2024-04-02
如何解决layer关闭弹出窗口触发表单提交的问题

这篇文章主要介绍如何解决layer关闭弹出窗口触发表单提交的问题，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！1、前言表单的代码：<form> 此处理代码...

99+

2024-04-02
Python 解决空列表.append() 输出为None的问题

想要实现的功能空列表中添加数原代码： FitnessBest = [] FitnessBest = FitnessBest.append(fitnessVal[0, 0]) print(FitnessBes...

99+

2022-06-02

Python append()
解决plsql因事务未提交造成的锁表问题

1、执行以下语句可查询被锁的表 select b.owner,b.object_name,a.session_id,a.locked_mode from v$l...

99+

2024-04-02
解决Oracle模拟事务提交、表锁，处理表锁问题

目录oracle模拟事务提交、表锁，处理表锁问题1.查看AutoCommit2.手动提交事务流程2.1 终端一尚未commit2.2 终端二查询2.3 终端一 commit2.4 终端二查询3.模拟表锁3.1 在终...

99+

2024-04-02
web开发中图片按钮提交与表单重复提交的问题分析

这篇文章主要介绍web开发中图片按钮提交与表单重复提交的问题分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！很多情况下为了美化表单都会把提交按钮改成用一个图片来代替。但如果没有注意细节的话会造成表单的重复提交，导致...

99+

2023-06-08
解决Pycharm的available packages为空的问题

Pycharm的available packages为空解决方案看了很多方法，添加镜像源什么的都不行，最后终于在外网一个论坛找到了解决方法：（1）退出pycharm；（2）删除project里的...

99+

2023-08-31

pycharm python
怎么解决oracle11g空表不能exp导出的问题

这篇文章主要介绍“怎么解决oracle11g空表不能exp导出的问题”，在日常操作中，相信很多人在怎么解决oracle11g空表不能exp导出的问题问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方...

99+

2024-04-02
Android getActivity()为空的问题解决办法

Android getActivity()为空的问题解决办法在开发项目中有时会碰到getActivity函数为空的情况，导致apk空指针崩溃问题，看代码逻辑没有明显的原因。&...

99+

2023-05-30

android getactivity() roi
怎么解决plsql因事务未提交造成的锁表问题

本篇内容主要讲解“怎么解决plsql因事务未提交造成的锁表问题”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么解决plsql因事务未提交造成的锁表问题”吧!执行以下语句可查询被锁的表 ...

99+

2023-06-22