vue form表單數據提交

利用v-model能比較便捷地上傳用戶信息的數據，不用一個個參數地拼接。直接在data根據要傳的字段定義一個對象，

再利用雙向綁定得到值。下面寫了傳json格式跟formData格式的兩種情況，根據實際參考

<template>
  <div class="from_box">
    <form action="">
      <input type="text"  placeholder="請輸入暱稱" v-model="formMess.account">
      <input type="password" placeholder="請輸入密碼" v-model="formMess.act_pwd">
      <input type="text" placeholder="請輸入手機號" v-model="formMess.phone">
    </form>
    <span class="but" @click="onSubmit()">提交</span>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "from",
  data() {
    return {
    	formMess:{
	    "account":"",
	    "act_pwd":"",
	    "phone":""
	}
    };
  },
  methods: {
    onSubmit() {
      /* json格式提交： */
      // let formData = JSON.stringify(this.formMess);

      /* formData格式提交： */
      let formData = new FormData();
      for(var key in this.formMess){
        formData.append(key,this.formMess[key]);
      }

        axios({
	    method:"post",
	    url:"xxxxxxx",
	    headers: {
		  "Content-Type": "multipart/form-data"
	    },
	    withCredentials:true,
	    data:formData
	}).then((res)=>{
            console.log(res);
        });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.from_box{
  form{
    width:90%;
    margin: auto;
    border:.01rem solid gray;
    display: flex;
    flex-wrap: wrap;
    input{
      width:80%;
      height:.5rem;
      margin-bottom: .2rem;
      border:.01rem solid black;
      height:.5rem;
    }
  }
  .but{
    font-size: .14rem;
    margin-left:5%;
  }
}
</style>

 

vue批量驗證form表單數據：

https://blog.csdn.net/caimingxian401/article/details/97135133