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

目录

• vue表单为空也能提交
• 大概是这样写的
• vue的表单提交方式
• vue表单收集和提交

vue表单为空也能提交

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

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

大概是这样写的

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表单收集和提交

    
    
    
    


    

        

            

                用户名
                    
                
            
            

                密码
                    
                
            
            

                头像
            
            

                姓名
                    
                
            
            

                性别
                    男
                    女
                
            
            

                年龄
                    
                
            
            

                爱好
                    
                        学习
                    
                    
                        打游戏
                    
                    
                        吃饭
                    
                
            
            

                所属校区
                    
                        北京
                        上海
                        深圳
                        武汉
                    
                
            
            

                其他信息
                    
                
            
            

                
                    
                    阅读并接受《用户协议》
                
            
            

                提交
            
        
    
    
    

上述代码有三点需要说明

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。