JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)

下面是详细讲解：

1. JQuery form表单提交前验证单选框是否选中

步骤1：给表单元素设置id属性

在HTML表单中添加id属性，例如：

<form id="myForm">
  <!-- 表单元素 -->
</form>

步骤2：编写JQuery代码

使用JQuery库完成表单验证功能，代码如下：

$(document).ready(function() {
  $('#myForm').submit(function() {
    if ($('input[name="radioBtn"]:checked').length == 0) {
      alert('请选择单选框');
      return false;
    }
    return true;
  });
});

上述代码通过选择表单元素并注册submit事件，判断单选框是否被选中。如果没有选中，弹出提示信息并返回false，阻止表单提交，否则返回true，提交表单。

示例

下面是一个简单的示例，可以参考下方代码并测试验证功能。

<form id="myForm">
  <label for="male">Male</label>
  <input type="radio" id="male" name="radioBtn" value="male">
  <label for="female">Female</label>
  <input type="radio" id="female" name="radioBtn" value="female">
  <input type="submit" value="Submit">
</form>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
  $('#myForm').submit(function() {
    if ($('input[name="radioBtn"]:checked').length == 0) {
      alert('请选择单选框');
      return false;
    }
    return true;
  });
});
</script>

2. 删除记录时验证

步骤1：给删除按钮设置class属性

在HTML表格中添加删除按钮，并为其设置class属性，例如：

<button class="deleteBtn">删除</button>

步骤2：编写JQuery代码

使用JQuery库完成删除记录时的验证功能，代码如下：

$(document).ready(function() {
  $('.deleteBtn').click(function() {
    if (confirm('是否删除该记录？')) {
      // 删除记录的操作
    }
  });
});

上述代码通过选择删除按钮并注册click事件，弹出确认框，询问是否删除该记录。如果用户点击“确定”，继续执行删除记录的操作；否则什么也不做。

示例

下面是一个简单的示例，可以参考下方代码并测试删除记录时的验证功能。

<table>
  <tr>
    <td>1</td>
    <td>John</td>
    <td>Doe</td>
    <td><button class="deleteBtn">删除</button></td>
  </tr>
  <tr>
    <td>2</td>
    <td>Jane</td>
    <td>Doe</td>
    <td><button class="deleteBtn">删除</button></td>
  </tr>
  <tr>
    <td>3</td>
    <td>Bob</td>
    <td>Smith</td>
    <td><button class="deleteBtn">删除</button></td>
  </tr>
</table>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
  $('.deleteBtn').click(function() {
    if (confirm('是否删除该记录？')) {
      // 删除记录的操作
      $(this).closest('tr').remove();
    }
  });
});
</script>

在上述示例中，点击“删除”按钮时，将弹出确认框，询问是否删除记录。如果用户点击“确定”，则删除该行记录。