Question

我试图在我的表单上构建一个客户端验证，我想知道是否有一个比我想象的更好的方法吗？

如果某个字段为空，那么我希望父容器边框变为红色，我可以使用if语句列表...

// Complete Signup Validation
$("#signup-com-btn").click(function() {

    var a = $("input.first_name").val();
    var b = $("input.surname").val();
    var c = $("input.email_addr").val();
    var d = $("input.user_age").val();
    var e = $("select.user_type").val();
    var f = $(".profile_image").val();

    if(a==''){
        $(this).parent().css...
        return false;
    }
    if(b==''){
        $(this).parent().css...
        return false;
    }       

...and so on...

});

Answer 1

将同一课程应用于所有

var valid = true;
$('.className').each(function(){
  if($(this).val() == ""){
   $(this).parent()....  
     valid = false;
  }  
});
 return valid ;

在点击功能中写下

Answer 2

你可以在一个循环中完成它们，如果它真的是全部：

$('#signup-com-btn').click(function() {
    var valid = true; // optimist

    $('input, select, .profile_image').each(function() {
        if($(this).val() == '') {
            valid = false;
            $(this).css('border', '1px solid red');
        }
    }

    if(!valid)
        return false;
}

Answer 3

我建议：

$('input, select, .profile_image').filter(function(){
    return !$(this).val().length;
}).parent().css('border-color', '#f00');

虽然我更喜欢使用类，但为了识别相关项和来设置父元素的样式，而不是手动修改CSS规则，给出：

$('.inputClassName').filter(function(){
    return !$(this).val().length;
}).parent().addClass('redBorder');

Answer 4

您可以创建一个数组并模拟一个foreach循环。这是一个Javascript示例：

function check_empty(){
    var a = document.getElementById('a')
    var b = document.getElementById('b')
    var c = document.getElementById('c')

    var abc = new Array(a, b, c);

    for(i=0; i<abc.length; i++){
        //do your if stuff here...
    }

Answer 5

因为您正在使用jquery，所以jquery验证是一个很好的选项，可以满足您的大部分表单验证需求！

http://plugins.jquery.com/validation/

没有IF语句jQuery，检查多个变量是否为空

5 个答案: