Question

我正在尝试在vue js和PHP中建立联系表单，但是它无法正常工作，而且我也遇到了错误。我使用互联网资源来构建此表单，并且观看了许多教程，但不确定如何解决。我对vuejs还是陌生的，将不胜感激

这是我的代码

<script>
export default{
  data(){
    return{
    errorMessage: "",
    successMessage: "",
    errors: [],
    trx_no: "",
    name: "",
    country: "",
    email: "",
    mobile_no: "",
    myAddress: "",
    newUser: {trx_no: "", name: "", country: "", email: "", mobile: ""}
    }
  },
  mounted: function(){
    this.getAllUsers();
  },

  myAddress: function() {
    return this.$store.state.myAddress;
  },

  methods: {
    saveUser: function(){
      //console.log(this.newUser);
      var formData = this.toFormData(this.newUser);

      axios.post('http://localhost:8888/vue-and-php/public/api/update-info-form.php?action=update', formData, { crossdomain: true })
      .then((response) => {

        this.newUser = {trx_no: "", name: "", country: "", email: "", mobile: ""};

        if(response.data.error){
          this.errorMessage = response.data.message;
        }else{
          this.getAllUsers();
        }
        });
    },
    toFormData: function(obj){
      var form_data = new FormData();
      for(var key in obj){
        form_data.append(key, obj[key]);
      }
      return form_data;
    },
    clearMessage: function(){
      this.errorMessage = "";
      this.successMessage = "";
    },
    //validation
    checkForm: function (e) {
      this.errors = [];

      //if (!this.trx_no) {
      //  this.errors.push("TRX Address Required.");
      //}

      if (!this.name) {
        this.errors.push("Name Required.");
      }
      if (!this.country) {
        this.errors.push("Country Required.");
      }
      if (!this.email) {
        this.errors.push('Email Required.');
      } else if (!this.validEmail(this.email)) {
        this.errors.push('Valid Email Address Required.');
      }
      if (!this.mobile_no) {
        this.errors.push("Phone Number Required.");
      }

      if (!this.errors.length) {
        return true;
      }

      e.preventDefault();
    },

    validEmail: function (email) {
      var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(email);
    }
  }
}
</script>

这是联系表格

<template>
  <b-container>
    <div class="update-info">
      <div class="feature-text myinv-title">
        <h5 class="title title-sm">Update your information</h5>
      </div>
      <form
        id="app"
        @submit="checkForm"
        method="post"
        novalidate="true"
        >

    <p v-if="errors.length">
      <b>Please fill in all the fields</b>
      <ul>
        <li v-for="error in errors" class="alert alert-danger">{{ error }}</li>
      </ul>
    </p>

    <div class="form-row">
      <div class="form-group col-md-3">
        <label for="trx">TRX Address No.</label>
        <input
          id="trx"
          class="form-control trx-address-nooverflow"
          v-model="myAddress"
          type="text"
          name="TRX Address"
          readonly
        >
      </div>
      <div class="form-group col-md-3">
        <label for="name">Name</label>
        <input
          id="name"
          class="form-control"
          v-model="name"
          type="text"
          name="name"
        >
      </div>
      <div class="form-group col-md-3">
        <label for="name">Country</label>
        <country-select
         id="Country"
         class="form-control"
         v-model="country"
         :country="country"
         topCountry="US" />
      </div>
      <div class="form-group col-md-3">
        <label for="email">Email ID</label>
        <input
          id="email"
          class="form-control"
          v-model="email"
          type="email"
          name="email"
        >
      </div>
    </div>
    <div class="form-row">
      <div class="form-group col-md-3">
        <label for="email">Mobile No</label>
        <input
          id="mobile"
          class="form-control"
          v-model="mobile_no"
          type="text"
          name="mobile"
        >
      </div>
      <div class="form-group col-md-3">
        <div class="top-30">
          <input type="submit" value="submit" class="btn btn-btn btn-grad btn-submit" @click="saveUser();"/>
        </div>
      </div>
       <div class="clearfix"></div>
    </div>
    </form>
    </div>
  </b-container>
</template>

预先感谢并尊重#p>

注意：API运行正常，我已经在Postman中对其进行了测试

Answer 1

我不知道您会遇到什么错误，但是我发现表单提交方式存在问题。

我建议进行一些更改：

表格： <form id="app" @submit="saveUser" method="post" novalidate="true"> ... </form>

按钮： <input type="submit" class="btn btn-btn btn-grad btn-submit" />

saveUser方法：

saveUser(event){
  event.preventDefault()

  this.checkForm()

  if(!this.errors.length) {
     var formData = this.toFormData(this.newUser);

      axios.post('http...')
      // rest of the code
  }
}

无法测试，因为我没有项目，但这应该会有所帮助。

但是，除了上面的方法，我建议在输入级别进行验证，并让每个输入组件处理自己的验证逻辑和消息。仅当表单中没有错误时，提交按钮才启用。为此有许多组件库。对于用户来说，实时查看错误要比通过上述方式在尝试提交表单时获得错误列表的体验要好得多。

我正在尝试在Vue.js和Php中建立联系表单，但出现错误，我不确定如何解决此问题

1 个答案: