JSFiddle - React, Tailwind, and code Playground

by ysuper

HTML

<form class="form-inline" role="form">
  <h3>序號數量即時統計</h3>
  <input id='in' type="text">
  <span style="font-size:18px;">　輸入序號數量：</span>
  <span style="font-size:18px;" id='out'>
  </span>
</form>

JavaScript

$('#in').on('input', function (e) {
    var serials = $("#in").val()
    if (serials == "") {
      $("#out").text("")
      return
    }
    if (check_invalid(serials)) {
      var serial_list = serials.split(',')
      var count = 0
      for (i = 0; i < serial_list.length; i++) {
        if (serial_list[i] == "") {
          $("#out").text("逗號兩側序號不得為空白，請檢查！")
          return
        } else {
          if (serial_list[i].indexOf('-') == -1) {
            count++
          } else {
            var serial_s = parseInt(serial_list[i].split('-')[0])
            var serial_e = parseInt(serial_list[i].split('-')[1])
            if (serial_s <= serial_e) {
              count += serial_e - serial_s + 1
            } else {
              $("#out").text("減號後面序號不得比前面序號小，請檢查！")
              return
            }
          }
        }
      }
      $("#out").text(count)
    }
  });

  function check_invalid(word) {
    invalid_str = ""
    for (var i = 0; i < word.length; i++) {
      if ((word[i].indexOf('-') != -1) || (word[i].indexOf(',') != -1) || (parseInt(word[i]) >= 0 && parseInt(word[i]) <= 9)) {
        // pass
      } else {
        invalid_str += word[i]
      }
    }
    if (invalid_str == "") {
      return true
    } else {
      $("#out").text(invalid_str + " 為無效字元，請檢查！")
      return false
    }
  }