jquery非空验证

jQuery 非空验证实现方法

使用 jQuery 进行非空验证可以通过多种方式实现，以下是几种常见的方法：

检查输入框是否为空

if ($('#inputId').val().trim() === '') {
    alert('输入框不能为空');
}

val() 方法获取输入框的值，trim() 方法去除字符串两端的空白字符。

表单提交时验证多个字段

$('#formId').submit(function(e) {
    var isValid = true;
    $('.required').each(function() {
        if ($(this).val().trim() === '') {
            isValid = false;
            $(this).addClass('error');
        } else {
            $(this).removeClass('error');
        }
    });
    if (!isValid) {
        e.preventDefault();
        alert('请填写所有必填字段');
    }
});

为需要验证的输入框添加 required 类，当字段为空时添加 error 类用于样式提示。

实时验证输入框

$('#inputId').on('input', function() {
    if ($(this).val().trim() === '') {
        $(this).addClass('error');
        $('#errorMsg').text('该字段不能为空');
    } else {
        $(this).removeClass('error');
        $('#errorMsg').text('');
    }
});

在用户输入时实时验证字段是否为空，并显示错误信息。

扩展 jQuery 验证方法

$.fn.isEmpty = function() {
    return $.trim($(this).val()) === '';
};

// 使用方式
if ($('#inputId').isEmpty()) {
    alert('输入框不能为空');
}

扩展 jQuery 方法使验证代码更简洁。

使用 HTML5 required 属性结合 jQuery

<input type="text" id="inputId" required>

$('#formId').submit(function(e) {
    if (!this.checkValidity()) {
        e.preventDefault();
        alert('请填写所有必填字段');
    }
});

结合 HTML5 的 required 属性进行验证，checkValidity() 方法检查表单有效性。

注意事项

• 对于多行文本框 (textarea) 使用相同的方法验证
• 验证前使用 trim() 去除空白字符避免用户输入空格通过验证
• 对于复选框和单选按钮，使用 is(':checked') 方法验证是否选中
• 考虑使用正则表达式进行更复杂的验证规则