javascript检查特定字符

Question

I am trying to create a timer in javascript, and I have got it working, however I am trying to validate the users input, for the time. Currently it will accept anything as long as the inputbox is not empty. But I am wanting to only allow numbers, colon (:) and periods (.), I have looked at several questions, but most seem to be only checking for all text characters.

Here is the working code: https://jsfiddle.net/hLqayL1w/

OR

HTML:

<div class="maincont">
  <h2>Please enter a amount of time</h2>
  <p id="timer">0:00</p>
  <div class="container">
    <input id="request" type="text" placeholder="Time"> &nbsp; &nbsp;
    <button type="submit" class="click">Start timer</button>
  </div>
  <P id="cancelbutton" class="cancel">Cancel timer</P>
</div>

JS:

$(document).ready(function() {
  $('#cancelbutton').hide();
});

$('.click').click(function() {
  var conts = $('#request').val();
  if ($('#request').val() === "") {
    return;
  }
  $('.container').hide();
  $('#cancelbutton').fadeIn('slow');
  var rawAmount = $('#request').val();
  var cleanAmount = rawAmount.split(':');
  var totalAmount = parseInt(cleanAmount[0] | 0) * 60 + parseInt(cleanAmount[1] | 0);
  $('#request').val(" ");

  var loop, theFunction = function() {

    totalAmount--;

    if (totalAmount == 0) {
      clearInterval(loop);
      $('#cancelbutton').hide();
      $('.container').fadeIn('slow');
    }
    var minutes = parseInt(totalAmount / 60);
    var seconds = parseInt(totalAmount % 60);

    if (seconds < 10)
      seconds = "0" + seconds;
    $('#timer').text(minutes + ":" + seconds);

    $('#cancelbutton').click(function() {
      totalAmount = 1
    });
  };

  var loop = setInterval(theFunction, 1000);
})

Answer 1

In your example you just check if the input is an empty string lets change that so we check if it matches an regular expression:

if (!$('#request').val().match(/[0-9:.]/gi)) {
    return;    
}

We make it look for numbers,colons and dots everything else will not match and the return will run.

Here is an working example.

(This is just an quick and dirty example it is not showcasing that the regex should be written in this way, there probably are better ways to write this)

Answer 2

How about this?

     $('#request').keyup(function() { 
    var el = $(this),
        val = el.val();

     el.val(val.replace(/[^\d\:.]/gi, ""));
 }).blur(function() {
     $(this).keyup();
 });

It will check check if the input is number/./:, if not it will remove it live.

    $(document).ready(function() {
  $('#cancelbutton').hide();
});
     $('#request').keyup(function() { 
        var el = $(this),
            val = el.val();

         el.val(val.replace(/[^\d\:.]/gi, ""));
     }).blur(function() {
         $(this).keyup();
     });
$('.click').click(function() {
  var conts = $('#request').val();
  if ($('#request').val() === "") {
    return;
  }
  $('.container').hide();
  $('#cancelbutton').fadeIn('slow');
  var rawAmount = $('#request').val();
  var cleanAmount = rawAmount.split(':');
  var totalAmount = parseInt(cleanAmount[0] | 0) * 60 + parseInt(cleanAmount[1] | 0);
  $('#request').val(" ");

  var loop, theFunction = function() {

    totalAmount--;

    if (totalAmount == 0) {
      clearInterval(loop);
      $('#cancelbutton').hide();
      $('.container').fadeIn('slow');
    }
    var minutes = parseInt(totalAmount / 60);
    var seconds = parseInt(totalAmount % 60);

    if (seconds < 10)
      seconds = "0" + seconds;
    $('#timer').text(minutes + ":" + seconds);

    $('#cancelbutton').click(function() {
      totalAmount = 1
    });
  };

  var loop = setInterval(theFunction, 1000);
})