当前位置：首页 > jquery

jquery表单非空验证

2026-03-17 09:28:32jquery

jQuery表单非空验证实现方法

方法一：使用基础选择器和val()方法 通过选择表单元素并检查其值是否为空字符串，可以触发提示或阻止表单提交。

$('#submitBtn').click(function() {
  var inputVal = $('#inputField').val().trim();
  if (inputVal === '') {
    alert('字段不能为空');
    return false;
  }
});

方法二：多字段批量验证 对表单内所有必填字段进行循环验证，适用于包含多个输入项的场景。

jquery表单非空验证

$('form').submit(function() {
  var isValid = true;
  $('.required').each(function() {
    if ($(this).val().trim() === '') {
      $(this).addClass('error');
      isValid = false;
    }
  });
  return isValid;
});

方法三：结合HTML5 required属性 利用原生HTML5验证特性，配合jQuery增强用户体验。

$('form').on('invalid', function() {
  $(':invalid').each(function() {
    $(this).addClass('error-field');
  });
}).on('input', 'input', function() {
  $(this).removeClass('error-field');
});

方法四：动态提示验证结果 实时显示验证状态，而不是仅在提交时提示。

jquery表单非空验证

$('.validate-field').blur(function() {
  if ($(this).val().trim() === '') {
    $(this).next('.error-message').show();
  } else {
    $(this).next('.error-message').hide();
  }
});

注意事项

始终使用trim()方法去除首尾空格
对密码等特殊字段应增加最小长度验证
考虑添加视觉反馈如红色边框或图标
邮箱等特定格式字段需要额外正则验证

完整示例代码

<form id="myForm">
  <input type="text" class="required" placeholder="用户名">
  <span class="error-msg" style="color:red;display:none">必填字段</span>
  <button type="submit">提交</button>
</form>

<script>
$(document).ready(function() {
  $('#myForm').submit(function(e) {
    $('.error-msg').hide();
    var hasError = false;

    $('.required').each(function() {
      if ($(this).val().trim() === '') {
        $(this).next('.error-msg').show();
        hasError = true;
      }
    });

    if (hasError) {
      e.preventDefault();
    }
  });
});
</script>