将上面的代码中的修改密码模块进行优化，增加旧密码，新密码，确认密码三个必填校验的form表和提交按钮

好的，以下是修改后的代码，增加了旧密码、新密码和确认密码的必填校验和提交按钮：

HTML代码：

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'userInfo')">个人信息</button>
  <button class="tablinks" onclick="openTab(event, 'changePwd')">修改密码</button>
  <button class="tablinks" onclick="openTab(event, 'bindPhone')">绑定手机号</button>
  <button class="tablinks" onclick="openTab(event, 'address')">收发货地址</button>
  <button class="tablinks" onclick="openTab(event, 'api')">小程序API模块</button>
</div>

<div id="userInfo" class="tabcontent">
  <h3>个人信息</h3>
  <p>用户名：xxx</p>
  <p>邮箱：xxx@xxx.com</p>
  <p>状态：正常</p>
  <p>手机号：xxx-xxxx-xxxx</p>
  <p>联系人：xxx</p>
</div>

<div id="changePwd" class="tabcontent">
  <h3>修改密码</h3>
  <form>
    <label for="oldPwd">旧密码：</label>
    <input type="password" id="oldPwd" name="oldPwd" required><br>

    <label for="newPwd">新密码：</label>
    <input type="password" id="newPwd" name="newPwd" required><br>

    <label for="confirmPwd">确认密码：</label>
    <input type="password" id="confirmPwd" name="confirmPwd" required><br>

    <button type="submit">提交</button>
  </form>
</div>

<div id="bindPhone" class="tabcontent">
  <h3>绑定手机号</h3>
  <p>这里是绑定手机号模块的内容</p>
</div>

<div id="address" class="tabcontent">
  <h3>收发货地址</h3>
  <p>这里是收发货地址模块的内容</p>
</div>

<div id="api" class="tabcontent">
  <h3>小程序API模块</h3>
  <p>这里是小程序API模块的内容</p>
</div>

CSS代码：

/* 标签页样式 */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* 按钮样式 */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* 激活按钮样式 */
.tab button.active {
  background-color: #ccc;
}

/* 标签页内容样式 */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

/* 激活标签页内容样式 */
.tabcontent.active {
  display: block;
}

JavaScript代码：

// 默认显示第一个标签页内容
document.getElementById("userInfo").style.display = "block";

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;

  // 隐藏所有标签页内容
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // 取消所有按钮的激活状态
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // 显示当前标签页内容，并激活当前按钮
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

// 提交修改密码表单
var changePwdForm = document.querySelector("#changePwd form");
changePwdForm.addEventListener("submit", function(e) {
  e.preventDefault();
  var oldPwd = document.querySelector("#oldPwd").value;
  var newPwd = document.querySelector("#newPwd").value;
  var confirmPwd = document.querySelector("#confirmPwd").value;
  if (oldPwd === "" || newPwd === "" || confirmPwd === "") {
    alert("请填写完整的密码信息！");
  } else if (newPwd !== confirmPwd) {
    alert("两次输入的新密码不一致，请重新输入！");
  } else {
    // TODO: 在此处提交表单数据
    alert("密码修改成功！");
  }
});

注意，在JavaScript中增加了一个事件监听器，用于提交修改密码表单。在监听器中，首先通过querySelector方法获取旧密码、新密码和确认密码的输入框的值，然后进行必填校验和密码一致性校验。如果输入框中有空值，则弹出提示框提示用户填写完整的密码信息；如果新密码和确认密码不一致，则弹出提示框提示用户重新输入；否则，可以在此处提交表单数据，这部分可以根据实际需求进行完善。