javascript - 如何将表单数据放入javascript中的对象中？

Question

我只希望我的表单在将其提交到后端时返回一个联系人对象。在检查输入后，我尝试这样做。

这样我就可以随后在我这边发出一个包含联系人对象的 JSON 请求。我的项目规范：返回联系人对象谢谢您的帮助。我是 JavaScript 新手！

 <form action="" method="post" class="row gy-4" id="formContact">
                    
     <div class="form-group">
          <label for="firstName">Firstname*</label>
          <input type="text" class="form-control" placeholder="" name="firstName" id="firstName" value="validFirstnameValue">
          <span class="error"></span>
     </div>

     <div class="form-group">
          <label for="lastName" class="form-label">Lastname *</label>
          <input type="text" class="form-control" name="lastName" id="lastName" placeholder="" value="validelastNamevalue">
          <span class="error"></span>
      </div>

      <div class="form-group">
           <label for="email" class="form-label">Email *</label>
           <input type="email" class="form-control" name="email" id="email" placeholder="[e-mail]" value="validEmailValue">
            <span class="error"></span>
      </div>

      <div class="form-group">
           <label for="address" class="form-label">Adress *</label>
           <input type="text" class="form-control" name="address" id="address" placeholder="" value="validAdressValue">
           <span class="error"></span>
      </div>

      <div class="form-group">
           <label for="city" class="form-label">City *</label>
           <input type="text" class="form-control" id="city" name="city" placeholder="" value="validCityValue">
            <span class="error"></span>
       </div>

       <div class=" form-group my-4 text-center ">
            <button class="btn  btnSubmit fw-bold btn-secondary" id="submitButton" type="submit" value="envoyer">Commander</button>
       </div>

 </form>

    let formContact = document.querySelector('#formContact');
    let inputFirstname = document.querySelector('#firstName');
    let inputLastname = document.querySelector('#lastName');
    let inputEmail = document.querySelector('#email');
    let inputAddress = document.querySelector('#address');
    let inputCity = document.querySelector('#city');



    const regexName = /^[a-zA-Z-\s]+$/;
    const regexMail = new RegExp('^[a-zA-Z0-9.-_]+[@]{1}[a-zA-Z0-9.-_]+[.]{1}[a-z]{2,10}$');
    const regexNumber = /^[0-9]{5}$/;
    const regexAdress = /^(([a-zA-ZÀ-ÿ0-9]+[\s\-]{1}[a-zA-ZÀ-ÿ0-9]+)){1,20}$/;



    document.querySelector('#formContact').addEventListener('change', function (e) {
        e.preventDefault();

        const borderCode = " #7EEA5E solid 2px"; 
        switch (e.target.id) {
            //TEST FIRSTNAME //
            case 'firstName':
                if (regexName.test(inputFirstname.value)) {
                    error = false;
                } else {
                    error = true;
                }
                break;
            // TEST LASTNAME //
            case 'lastName':
                if (regexName.test(inputLastname.value)) {
                    error = false;
                } else {
                    error = true;
                }
                break;
            // TEST EMAIL //
            case 'email':
                if (regexMail.test(inputEmail.value)) {
                    error = false;
                } else {
                    error = true;
                }
                break;
            // TEST ADDRESS //
            case 'address':
                if (regexAdress.test(inputAddress.value)) {
                    error = false;
                } else {
                    error = true;
                }
                break;
            // TEST CITY //
            case 'city':
                if (regexName.test(inputCity.value)) {
                    error = false;
                } else {
                    error = true;
                }
                break;
        }
        if (!error) {
            e.target.style.border = borderCode;

        }

    });

    document.querySelector('#submitButton').addEventListener('click', function (e) {

        if (error) {
            e.preventDefault();
            alert('Check');
        }


    });
    let contact = {
        firstName: '',
        lastName: '',
        email: '',
        address: '',
        city: '',
    }

标签： javascript

Answer 1

有基于您的代码的粗略工作示例

// get elements
const formEl = document.getElementById('formContact');
const firstEl = document.getElementById('firstName');
const lastEl = document.getElementById('lastName');
const emailEl = document.getElementById('email');
const addressEl = document.getElementById('address');
const cityEl = document.getElementById('city');
const submitEl = document.getElementById('submitButton');


// regex
const regexName = /^[a-zA-Z-\s]+$/;
const regexMail = new RegExp('^[a-zA-Z0-9.-_]+[@]{1}[a-zA-Z0-9.-_]+[.]{1}[a-z]{2,10}$');
const regexNumber = /^[0-9]{5}$/;
const regexAdress = /^(([a-zA-ZÀ-ÿ0-9]+[\s\-]{1}[a-zA-ZÀ-ÿ0-9]+)){1,20}$/;

let error = false;

document.querySelector('#formContact').addEventListener('input', e => {
  e.preventDefault();
  
  const borderSuccess = " #7EEA5E solid 2px"; 
  const borderError = 'red solid 2px';
  switch (e.target.id) {
      //TEST FIRSTNAME //
    case 'firstName':
      if (regexName.test(firstEl.value)) {
        error = false;
        e.target.style.border = borderSuccess;
      } else {
        error = true;
        e.target.style.border = borderError;
      }
      break;
      // TEST LASTNAME //
    case 'lastName':
      if (regexName.test(lastEl.value)) {
        error = false;
        e.target.style.border = borderSuccess;
      } else {
        error = true;
        e.target.style.border = borderError;
      }
      break;
      // TEST EMAIL //
    case 'email':
      if (regexMail.test(emailEl.value)) {
        error = false;
        e.target.style.border = borderSuccess;
      } else {
        error = true;
        e.target.style.border = borderError;
      }
      break;
      // TEST ADDRESS //
    case 'address':
      if (regexAdress.test(addressEl.value)) {
         error = false;
        e.target.style.border = borderSuccess;
      } else {
        error = true;
        e.target.style.border = borderError;
      }
      break;
      // TEST CITY //
    case 'city':
      if (regexName.test(cityEl.value)) {
         error = false;
        e.target.style.border = borderSuccess;
      } else {
        error = true;
        e.target.style.border = borderError;
      }
      break;
  }
});

formEl.onsubmit = e => {
    e.preventDefault();
  
  if (error) {
    alert('Check');
    return;
  }

  let contact = {
    firstName: firstEl.value,
    lastName: lastEl.value,
    email: emailEl.value,
    address: addressEl.value,
    city: cityEl.value
  };
  
  console.log(contact);
};

input:focus {
  outline: none;
}

<form action="" method="post" class="row gy-4" id="formContact">
  <div class=" form-group">
    <label for="firstName">Firstname*</label>
    <input type="text" class="form-control" placeholder="" name="firstName" id="firstName" value="John">
    <span class="error"></span>
</div>

  <div class="form-group">
    <label for="lastName" class="form-label">Lastname *</label>
    <input type="text" class="form-control" name="lastName" id="lastName" placeholder="" value="Smith">
    <span class="error"></span>
  </div>

  <div class="form-group">
    <label for="email" class="form-label">Email *</label>
    <input type="email" class="form-control" name="email" id="email" placeholder="[e-mail]" value="[e-mail]">
    <span class="error"></span>
  </div>

  <div class="form-group">
    <label for="address" class="form-label">Adress *</label>
    <input type="text" class="form-control" name="address" id="address" placeholder="" value="Holy Mary street">
    <span class="error"></span>
  </div>



  <div class="form-group">
    <label for="city" class="form-label">City *</label>
    <input type="text" class="form-control" id="city" name="city" placeholder="" value="New York">
    <span class="error"></span>
  </div>



  <div class=" form-group my-4 text-center ">
    <button class="btn  btnSubmit fw-bold btn-secondary" id="submitButton" type="submit" value="envoyer">Commander</button>
  </div>
</form>