以html形式输入日期后如何修复400错误请求错误？答案

【问题标题】：How to fix 400 bad request error after having date input in html form?以html形式输入日期后如何修复400错误请求错误？
【发布时间】：2020-11-18 16:36:12
【问题描述】：

我有一个表格，用户可以在其中输入生日。我正在使用 vue.js 并使用 new FormData() 发送请求。如果我不填写生日字段，它会给我错误[HTTP/1.0 400 BAD REQUEST 272ms] *错误对象{生日：[…]} * birthday [“不是一个有效的日期。” ] 0 "日期无效。" 如果我填写该字段，它会起作用，但我希望它是可选的。

谢谢。

HTML

<input
  id="birthday"
  v-model="newUser.birthday"
  class="form-control"
  placeholder="birthday (Opt)"
  type="date"
 />

Vue.js

  new Vue({
    el: "#app",
    delimiters: ["[[", "]]"],
    data() {
      return {
       newUser: {
         name: "",
         surname: "",
         email: "",
         title: "",
         birthday: "",
         employee_number: "",
         monthly_meal_limit: "",   
         max_meal_amount: ""
       },
      };
    },

发送请求的函数

      sendInvite(newUser) {
        let inputCheck = this.validateBeforeSubmit(newUser);    
        
        if(inputCheck) {
        let fd = new FormData();
        
        fd.append("name", newUser.name);
        fd.append("surname", newUser.surname);
        fd.append("email", newUser.email);
        fd.append("title", newUser.title)
        fd.append("employee_number", newUser.employee_number)
        fd.append("birthday", newUser.birthday)
        
        let token = this.getCsrfToken()
        const headers = new Headers({
          "X-CSRFToken": token
        })

       
        //send  the request with the formdata
        let req = new Request(apiPath, {
            body: fd,
            headers,
            method: "POST"

        });
        fetch(
            req)
        .then((response) => response.json())
        .then((data) => {
          this.addNewForm = false,
            this.newUser = {
              name: "",
              surname: "",
              email: "",
              title: "",
              employee_number: 0,
              birthday: ""
            },
            this.getInvites()
        })
            .catch((error) => console.log("error", error));
        }
    }

【问题讨论】：

服务器对这些数据做了什么？它是在尝试将其存储在数据库中还是什么？
您的服务器需要日期 - 您无法在客户端代码中进行任何更改。您需要更改服务器。
是的，没错。问题在于，正如我所说，如果我留下这样的输入：mm/dd/yyyy 并且不填写它，它会给我 **birthday [“Not a valid date.” ]** 错误，如果我填写它，它可以工作。使用可选，我的意思是我希望用户不能填写生日字段。
@Periplo 是的，它存储它，后来我确实收到了获取数据的请求。
好的，然后确保该字段在您的数据库中可以为空，并在前面执行一个简单的验证。如果其值等于 'mm/dd/yyyy'，则不要附加它。

标签： javascript forms vue.js input form-data

【解决方案1】：

如果后端可以的话，也许你可以这样做。并且不要将生日字段添加到表单中

      let inputCheck = this.validateBeforeSubmit(newUser);    
            
            if(inputCheck) {
            let fd = new FormData();
            
            fd.append("name", newUser.name);
            fd.append("surname", newUser.surname);
            fd.append("email", newUser.email);
            fd.append("title", newUser.title)
            fd.append("employee_number", newUser.employee_number)
        
           if(newUser.birthday && newUser.birthday.length > 0){
            fd.append("birthday", newUser.birthday)
           }
         ......

【讨论】：