jquery表单验证提交

以下是一个简单的jQuery表单验证和提交的例子：

<form id="myform">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username"><br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password"><br>
  <input type="checkbox" id="allow" name="allow" checked>
  <label for="allow">同意协议</label><br>
  <button type="submit">提交</button>
</form>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(function() {
    var $username = $('#username');
    var $password = $('#password');
    var $allow = $('#allow');
    var $form = $('#myform');

    // 验证用户名
    function validateUsername() {
      var value = $username.val();
      if (!value) {
        alert('用户名不能为空');
        return false;
      }
      return true;
    }

    // 验证密码
    function validatePassword() {
      var value = $password.val();
      if (!value) {
        alert('密码不能为空');
        return false;
      }
      return true;
    }

    // 验证同意协议
    function validateAllow() {
      if (!$allow.prop('checked')) {
        alert('请同意协议');
        return false;
      }
      return true;
    }

    // 提交表单
    function submitForm() {
      alert('提交成功');
      $form.submit();
    }

    // 绑定提交事件
    $form.submit(function(event) {
      event.preventDefault(); // 阻止默认提交行为
      if (validateUsername() && validatePassword() && validateAllow()) {
        submitForm();
      }
    });
  });
</script>

该例子中，我们使用jQuery选择器获取表单元素，并定义了三个验证函数：`validateUsername()`、`validatePassword()`和`validateAllow()`，分别用于验证用户名、密码和同意协议是否勾选。在提交表单时，我们通过`event.preventDefault()`阻止了默认的表单提交行为，并在验证通过后调用`submitForm()`函数提交表单。