html+css+js收货地址代码

这里是一个基于HTML、CSS和JavaScript的收货地址代码示例，包含了表单验证功能：

HTML代码：

<form id="address-form">
  <div class="form-group">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" required>
    <div class="invalid-feedback">请输入姓名</div>
  </div>
  
  <div class="form-group">
    <label for="address">地址：</label>
    <input type="text" id="address" name="address" required>
    <div class="invalid-feedback">请输入地址</div>
  </div>
  
  <div class="form-group">
    <label for="city">城市：</label>
    <input type="text" id="city" name="city" required>
    <div class="invalid-feedback">请输入城市</div>
  </div>
  
  <div class="form-group">
    <label for="state">省/州：</label>
    <input type="text" id="state" name="state" required>
    <div class="invalid-feedback">请输入省/州</div>
  </div>
  
  <div class="form-group">
    <label for="zip">邮编：</label>
    <input type="text" id="zip" name="zip" required>
    <div class="invalid-feedback">请输入邮编</div>
  </div>
  
  <button type="submit">提交</button>
</form>

CSS代码：

.form-group {
  margin-bottom: 20px;
}

label {
  display: inline-block;
  width: 100px;
  font-weight: bold;
  margin-right: 10px;
}

input[type="text"],
button[type="submit"] {
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

input[type="text"]:focus {
  outline: none;
  border-color: #66afe9;
  box-shadow: 0 0 5px #66afe9;
}

.invalid-feedback {
  color: red;
  display: none;
  margin-top: 5px;
}

.invalid-feedback.show {
  display: block;
}

JavaScript代码：

// 获取表单元素
const form = document.querySelector('#address-form');
const nameInput = document.querySelector('#name');
const addressInput = document.querySelector('#address');
const cityInput = document.querySelector('#city');
const stateInput = document.querySelector('#state');
const zipInput = document.querySelector('#zip');

// 表单验证
form.addEventListener('submit', function(event) {
  event.preventDefault();

  if (!nameInput.value.trim()) {
    nameInput.classList.add('is-invalid');
    nameInput.nextElementSibling.classList.add('show');
  } else {
    nameInput.classList.remove('is-invalid');
    nameInput.nextElementSibling.classList.remove('show');
  }

  if (!addressInput.value.trim()) {
    addressInput.classList.add('is-invalid');
    addressInput.nextElementSibling.classList.add('show');
  } else {
    addressInput.classList.remove('is-invalid');
    addressInput.nextElementSibling.classList.remove('show');
  }

  if (!cityInput.value.trim()) {
    cityInput.classList.add('is-invalid');
    cityInput.nextElementSibling.classList.add('show');
  } else {
    cityInput.classList.remove('is-invalid');
    cityInput.nextElementSibling.classList.remove('show');
  }

  if (!stateInput.value.trim()) {
    stateInput.classList.add('is-invalid');
    stateInput.nextElementSibling.classList.add('show');
  } else {
    stateInput.classList.remove('is-invalid');
    stateInput.nextElementSibling.classList.remove('show');
  }

  if (!zipInput.value.trim()) {
    zipInput.classList.add('is-invalid');
    zipInput.nextElementSibling.classList.add('show');
  } else {
    zipInput.classList.remove('is-invalid');
    zipInput.nextElementSibling.classList.remove('show');
  }

  // 如果所有输入都是有效的，则提交表单
  if (form.checkValidity()) {
    // TODO: 处理表单提交
    alert('表单提交成功！');
  }
});

这个代码块中，我们使用了HTML5的required属性来确保表单输入不为空，并使用CSS样式和JavaScript代码来显示/隐藏错误提示信息和提交表单。