jQuery帮助-验证

我正在尝试创建一个表单，允许用户为订单表单输入值。加载表单时，它需要高亮显示其中没有任何内容的所有行，或者值大于100的行，然后在更正后取消高亮显示

此外，还有一个提交按钮-当突出显示任何文本框时，需要禁用该按钮

这是我到目前为止的代码——有人有什么想法吗

$(':text').focusin(function() {
    var inp = $(this).val();
    if (inp > 100) {
        $(this).css('background-color', 'red');
    }
    if (inp.length < 1) {
        $(this).css('background-color', 'red');
    }
    if (inp.length > 0 && inp <= 100) {
        $(this).css('background-color', 'white');
    }
});

$(':text').change(function() {
    var inp = $(this).val();
    if (inp > 100) {
        $(this).css('background-color', 'red');
    }
    if (inp.length < 1) {
        $(this).css('background-color', 'red');
    }
    if (inp.length > 0 && inp <= 100) {
        $(this).css('background-color', 'white');
    }
});

$（':text'）。焦点（函数（）{
var inp=$（this.val（）；
如果（inp>100）{
$（this.css（'background-color'，'red'）；
}
如果（输入长度<1）{
$（this.css（'background-color'，'red'）；
}
如果（输入长度>0和输入100）{
$（this.css（'background-color'，'red'）；
}
如果（输入长度<1）{
$（this.css（'background-color'，'red'）；
}
如果（inp.length>0&&inp，我建议您在更改元素时向元素添加一个类（即“red_-bg”）。这将为您提供确定何时启用提交按钮的简单方法（即
$（'.red_-bg'）。length==0
）

这样做应该可以：

function validateField(jqSelector) {
    var inp = jqSelector.val();
    var regex = new RegExp(/^\d+$/);
    if (regex.test(inp) && parseInt(inp) <= 100) {
        $(this).removeClass('red_bg');
    } else {
        $(this).addClass('red_bg')
    }
    setSubmit();
}

function setSubmit() {
    $('.red_bg').length == 0) {
        $('#submit_id').removeAttr('disabled');
    }  else {
        $('#submit_id').attr('disabled', 'disabled');
    }
}


$(function () {
    $(':text').focusin(function() {
        validateField($(this));
    }).change(function() {
        validateField($(this));
    }).each(function() {
        validateField($(this));
    });
});

函数验证字段（jqSelector）{
var inp=jqSelector.val（）；
var regex=new RegExp（/^\d+$/）；
如果（regex.test（inp）和&parseInt（inp）我认为这很好地解决了这个问题

HTML

CSS

由于事件处理程序函数的作用完全相同，因此可以将代码重写为

function test() {
    var inp = $(this).val();
    if (inp > 100) {
        $(this).css('background-color', 'red');
    }
    if (inp.length < 1) {
        $(this).css('background-color', 'red');
    }
    if (inp.length > 0 && inp <= 100) {
        $(this).css('background-color', 'white');
    }
};

$(':text').focusin(test).change(test);
test();

功能测试（）{
var inp=$（this.val（）；
如果（inp>100）{
$（this.css（'background-color'，'red'）；
}
如果（输入长度<1）{
$（this.css（'background-color'，'red'）；
}
如果（inp.length>0&&inp那么，什么不起作用了？这与PHP有什么关系？它工作得很好，但我只是想知道是否有可能在表单加载时预先突出显示它们，并且如果其中任何一个仍然突出显示，则禁用提交按钮。我想我是无意中添加了PHP标记-我的错！对不起，这是assu提示默认背景颜色为白色，否则需要显式更改else子句以同时设置白色背景（或将类切换为白色背景类）。从这个答案中，真正的收获是注意到公共代码是如何被模块化为可重用函数的，以及触发器是如何链接在一起的。更新为包含正则表达式，以测试输入中输入的所有数字，并对输入字符串执行正确的
parseInt
。更新为对关于OP wa的原始问题的最新评论无法在页面加载时运行此验证。我将所有内容包装在onready函数中，并使用
each（）
遍历每个字段并预先执行验证。是的，我这样做了。当输入模糊时，按钮将根据此表达式的结果禁用或启用
$（“input.red”）.length>0
太棒了！非常感谢您的帮助！一切都很好！没问题。别忘了，如果这解决了您的问题，请将其标记为已接受的解决方案。
$('input').each(function(){
  var $this = $(this),
      val = $this.val();

  if(val > 100 || val === ''){
     $this.addClass('red');
  }
}).on('blur', function(){
  var $this = $(this),
      val = $this.val();

  $this.toggleClass('red', val === '' || val > 100);

  $('button').prop('disabled', $("input.red").length > 0);  
});

.red{
   background-color: red;
}

function test() {
    var inp = $(this).val();
    if (inp > 100) {
        $(this).css('background-color', 'red');
    }
    if (inp.length < 1) {
        $(this).css('background-color', 'red');
    }
    if (inp.length > 0 && inp <= 100) {
        $(this).css('background-color', 'white');
    }
};

$(':text').focusin(test).change(test);
test();