0

我正在尝试为订单创建一个允许用户输入值的表单。加载表单时，它需要突出显示所有没有任何内容的行，或者值大于 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');
    }
});
4

3 回答 3

2

我对您的建议是在更改元素时向元素添加一个类（即“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));
    });
});

请注意，您可能会考虑使用更深入的验证，正如我现在使用正则表达式所展示的那样，您没有做任何事情来验证输入的值是否为数字。

于 2013-01-12T00:28:15.120 回答
0

我认为这很好，http://jsfiddle.net/fr85u/

HTML

<form>
  <input />
  <input value="101"/>
  <input value="99"/>
  <button disabled="disabled"> submit </button>
</form>

JS

$('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);  
});

CSS

.red{
   background-color: red;
}
于 2013-01-12T00:29:31.980 回答
0

由于您的事件处理程序功能完全相同，您可以将代码重写为

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();

倒数第二行将事件处理程序附加到两个事件，最后一行第一次执行突出显示功能。

于 2013-01-12T00:29:39.517 回答