Twitter like counter

Question

库/框架使用= Jquery+Bootstrap 4我想做一个类似twitter的计数器，但是有两个输入字段，如果两个输入是有效的，那么post。到目前为止，这是我的代码。

​

$('.new_post_title').keyup(function() {
  var max_character = 15;
  var length_ = $(this).val().length;

  if (length_ > max_character) {
    $(".new_post_title_count").css('color', 'red');
    var character = length_;
    $('.new_post_title_count').text(character);
    $('.new_post_button').prop('disabled', true);
  } else {
    $(".new_post_title_count").css('color', 'black');
    var character = max_character - length_;
    $('.new_post_title_count').text(character);
    $('.new_post_button').prop('disabled', false);
  }
});

$('.new_post_content').keyup(function() {
  var max_character = 10;
  var length_ = $(this).val().length;

  if (length_ > max_character) {
    $(".new_post_content_count").css('color', 'red');
    var character = length_;
    $('.new_post_content_count').text(character);
    $('.new_post_button').prop('disabled', true);
  } else {
    $(".new_post_content_count").css('color', 'black');
    var character = max_character - length_;
    $('.new_post_content_count').text(character);
    $('.new_post_button').prop('disabled', false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade" id="new_post_modal" tabindex="-1" role="dialog" aria-labelledby="new_post_modalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label class="form-control-label">Title (Optional)</label>
            <input type="text" class="form-control new_post_title" placeholder="Make a title...">
            <span class="new_post_title_count"></span>
          </div>
          <div class="form-group">
            <label class="form-control-label">Content</label>
            <input type="text" class="form-control new_post_content" placeholder="Publish something...">
            <span class="new_post_content_count"></span>
          </div>
          <div class="form-group">
            <label class="form-control-label">Image</label>
            <input type="file" class="form-control-file">
          </div>
          <button class="btn btn-primary new_post_button">Post</button>
        </form>
      </div>
    </div>
  </div>
</div>

​

问题是，如果我欺骗了这段代码，我可以在没有验证的情况下发布帖子，对于第一次输入，我输入了20个字符，对于第二个输入，我输入了10个字符，按钮是启用的。

Answer 1

您需要单独检查按钮的启用/禁用，其中还需要考虑其他字段是否有效。这两个字段都需要有效才能显示按钮，但在您的代码中，您只需检查当前正在键入的字段。

​

var titleLength = 0;
var titleMaxLength = 15;
var contentLength = 0;
var contentMaxLength = 10;

$('.new_post_title').keyup(function() {
  titleLength = $(this).val().length;
  if (titleLength > titleMaxLength) {
    $(".new_post_title_count").css('color','red');
    var character = titleLength;
    $('.new_post_title_count').text(character);
  } 
  else {
    $(".new_post_title_count").css('color','black');
    var character = titleMaxLength - titleLength;
    $('.new_post_title_count').text(character);
  }
  if (titleLength > titleMaxLength || contentLength > contentMaxLength) {
    $('.new_post_button').prop('disabled', true);
  }
  else {
    $('.new_post_button').prop('disabled', false);
  }
});

$('.new_post_content').keyup(function() {
  contentLength = $(this).val().length;
  if (contentLength > contentMaxLength) {
    $(".new_post_content_count").css('color','red');
    var character = contentLength;
    $('.new_post_content_count').text(character);
  } 
  else  {
    $(".new_post_content_count").css('color','black');
    var character = contentMaxLength - contentLength;
    $('.new_post_content_count').text(character);
  }
  if (titleLength > titleMaxLength || contentLength > contentMaxLength) {
    $('.new_post_button').prop('disabled', true);
  }
  else {
    $('.new_post_button').prop('disabled', false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade" id="new_post_modal" tabindex="-1" role="dialog" aria-labelledby="new_post_modalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label class="form-control-label">Title (Optional)</label>
            <input type="text" class="form-control new_post_title" placeholder="Make a title...">
            <span class="new_post_title_count"></span>
          </div>
          <div class="form-group">
            <label class="form-control-label">Content</label>
            <input type="text" class="form-control new_post_content" placeholder="Publish something...">
            <span class="new_post_content_count"></span>
          </div>
          <div class="form-group">
            <label class="form-control-label">Image</label>
            <input type="file" class="form-control-file">
          </div>
          <button class="btn btn-primary new_post_button">Post</button>
        </form>
      </div>
    </div>
  </div>
</div>

​