vue空格报错,提交表单为空设置

  vue空格报错,提交表单为空设置

  这篇文章主要介绍了解决某视频剪辑软件表单为空也能提交的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  

目录

   vue表单为空也能提交大概是这样写的某视频剪辑软件的表单提交方式某视频剪辑软件表单收集和提交

  

vue表单为空也能提交

  今天在用某视频剪辑软件写表单验证的时候,习惯性把v型车绑定的值设置为空,然后再测试的时候,发现如果填写了表单后,又删除输入的内容,竟然能提交上去,百思不得其解。

  最后通过某视频剪辑软件开发工具这个工具找到了问题所在。

  

大概是这样写的

  输入v-model=ipt /

  data () {

  返回{

  ipt: null,

  }

  }

  如果(this.ipt!==null) {

  axios.post().

  }

  研究了老半天,最后通过某视频剪辑软件工具发现最初设置人际心理治疗的值为空,当表单输入内容,又删除之后,虽然内容不见了,但是人际心理治疗的值变为了,这样就不能通过简单的!==nulll来判断了。

  如果(this.ipt!==null this.ipt) {

  axios.post().

  }

  

vue的表单提交方式

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

  

vue表单收集和提交

  !声明文档类型

  html lang=en

  头

  meta charset=UTF-8

  meta http-equiv= X-UA-Compatible content= IE=edge

  meta name= viewport content= width=device-width,initial-scale=1.0

  标题文档/标题

  /头

  身体

  div id=应用程序

  form:model= form @ submit。阻止=提交

  差异

  标签用户名

  输入v型车。trim= form。用户名 type= text placeholder=请输入用户名

  /标签

  /div

  差异

  标签密码

  输入v-model=形式。密码 type= password placeholder=请输入密码

  /标签

  /div

  差异

  标签头像输入类型= file @ change= handle change /label

  /div

  差异

  标签姓名

  输入v型车。trim= form。name type= text placeholder=请输入您的姓名

  /标签

  /div

  差异

  标签性别

  标签输入v-model=形式。性别类型=单选名称=性别值=男性男/标签

  标签输入v-model=形式。性别类型=单选名称=性别值=女性女/标签

  /标签

  /div

  差异

  标签年龄

  输入type= number 垂直模型。number=形式。年龄 placeholder=请输入年龄

  /标签

  /div

  差异

  标签爱好

  标签

  输入v-model=形式。爱好类型=复选框值=学习学习

  /标签

  标签

  输入v-model=形式。爱好类型=复选框值=游戏打游戏

  /标签

  标签

  输入v-model=形式。爱好 type= checkbox value= eat 吃饭

  /标签

  /标签

  /div

  差异

  标签所属校区

  select v-model=form.campus

  选项值=北京北京/选项

  期权价值=上海上海/选项

  期权价值=深圳深圳/选项

  选项值=武汉武汉/选项

  /选择

  /标签

  /div

  差异

  标签其他信息

  textarea v模型。懒=形式。other style= vertical-align:middle;cols=30 rows=10/textarea

  /标签

  /div

  差异

  标签

  输入v-model=形式。接受“type=”复选框

  阅读并接受a href= http://www。百度一下。com rel=外部无关注 《用户协议》/a

  /标签

  /div

  差异

  提交按钮/按钮

  /div

  /表单

  /div

  script src=lib/vue.js/script

  脚本

  Vue.config.productionTip=false

  const vm=new Vue({

  埃尔: #app ,

  data() {

  返回{

  表单:{

  爱好:[]

  },

  图像:{}

  }

  },

  方法:{

  提交(){

  console . log(this . form);

  //上传到这里(axios,ajax)

  },

  handleChange(事件){

  let file=event.target.files[0]

  this.form.image=file

  }

  },

  })

  /脚本

  /body

  /html

  上述代码有三点需要说明

  在窗体标签中,出现model=form。这是为了将表单中的所有数据动态收集到vue的数据中的表单对象中,以便于统一管理。表单标签上的@submit.prevent是提交时阻止表单的默认行为(跳转)。v-model.trim是去除输入数据前后的空格。v型车。Number是转换为number的类型;V-model.lazy是在失去焦点后将数据渲染到页面上。

  以上个人经历,希望能给大家一个参考,也希望大家多多支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: