0

我试图在我的表单上建立客户端验证，我想知道是否有比我想象的更好的方法来做到这一点？

如果一个字段为空，那么我希望父容器边框变为红色，我可以使用 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...

});
4

5 回答 5

1

对所有人应用相同的课程

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

把这个写在点击函数中

于 2013-06-06T18:36:59.747 回答
1

如果真的是所有这些，你可以在一个循环中完成它们：

$('#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;
}
于 2013-06-06T18:37:58.767 回答
1

我建议：

$('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');
于 2013-06-06T18:44:44.953 回答
0

您可以创建一个数组并模拟一个 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...
    }
于 2013-06-06T18:36:37.770 回答
0

因为您使用的是 jquery，所以 jquery 验证是一个不错的选择，可以满足您的大部分表单验证需求！

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

于 2013-06-06T18:52:00.500 回答