利用jquery做一个非空验证表单

HTML代码：

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>
  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea><br>
  <input type="submit" value="Submit">
</form>

jQuery代码：

$(document).ready(function() {
  $('#myForm').submit(function(e) {
    e.preventDefault(); // 阻止表单默认提交行为
    var name = $('#name').val();
    var email = $('#email').val();
    var message = $('#message').val();
    if (name === '') {
      alert('Name不能为空');
      return false;
    } else if (email === '') {
      alert('Email不能为空');
      return false;
    } else if (message === '') {
      alert('Message不能为空');
      return false;
    } else {
      // 表单验证通过，可以提交表单
      $(this).unbind('submit').submit();
    }
  });
});

解释：

$(document).ready() 函数确保页面加载完成后再执行jQuery代码。
$('#myForm').submit() 函数监听表单提交事件。
e.preventDefault() 阻止表单默认提交行为，以便进行自定义验证。
$('#name').val() 获取名字输入框的值。
if (name === '') 判断名字是否为空。
return false 防止表单提交。
$(this).unbind('submit').submit() 取消表单监听器并提交表单。