如何实现不提交表单的表单验证按钮功能？

没问题！要实现不提交表单的前提下做输入验证，咱们可以给验证按钮绑定一个点击事件，手动读取输入框的值，然后按照规则校验就行，完全不用触发表单提交。下面是针对你需求的具体实现方案：

<form id="myForm">
  <label for="firstName">First Name:</label>
  <input type="text" id="firstName" name="firstName">
  <br>
  <label for="lastName">Last Name:</label>
  <input type="text" id="lastName" name="lastName">
  <br>
  <!-- 用普通按钮而非提交按钮，避免触发表单提交动作 -->
  <button type="button" id="validateBtn">验证</button>
</form>

<script>
// 获取页面元素
const validateBtn = document.getElementById('validateBtn');
const firstNameInput = document.getElementById('firstName');
const lastNameInput = document.getElementById('lastName');

// 给验证按钮绑定点击事件
validateBtn.addEventListener('click', function() {
  // 获取输入框内容，trim()去除前后空格避免误判
  const firstName = firstNameInput.value.trim();
  const lastName = lastNameInput.value.trim();
  
  // 按照指定规则校验
  if (firstName === 'and' && lastName === 'jkp') {
    // 符合条件则输出success
    document.write('success');
  } else {
    // 不符合规则时的提示（可根据需求修改）
    console.log('输入不符合验证规则，请检查后重试');
  }
});
</script>

• 我特意用了type="button"的普通按钮，而不是表单默认的提交按钮（type="submit"），这样点击按钮时完全不会触发表单提交流程，所有逻辑都由我们手动控制。
• 通过.value属性获取输入框的实时内容，搭配trim()可以过滤用户不小心输入的前后空格，避免因为多余空格导致验证失败。
• 验证逻辑写在按钮的点击回调函数里，完全独立于表单提交机制，满足你“不提交表单就验证”的需求。

内容的提问来源于stack exchange，提问作者user7038047