结合HTML5和jQuery的popover验证，自定义数字输入控件

1、HTML代码

<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}
</style>

<div class="input-group number-spinner">
	<span class="input-group-btn">
    	<button class="btn btn-default" data-dir="dwn">
    		<span class="glyphicon glyphicon-minus"></span>
    	</button>
    </span>
    <input id="package_qty_1" name="package_qty[]" type="number" min="1" style="width:50px" class="form-control text-center required" value="1" onblur="intValidator(event)">
    <span class="input-group-btn">
    	<button class="btn btn-default" data-dir="up">
	    	<span class="glyphicon glyphicon-plus"></span>
    	</button>
    </span>
</div>

2、JS代码

<script type="text/javascript">
  function intValidator(e){
  	var value = e.target.value;
    value = Math.ceil(value);
    e.target.value = value;
    return;
  }

  $(function() {
	$('#form-bind-packages').validate_popover({ //popover验证支持html5的min="1"的验证
      popoverPosition: 'top'
    });

	$(document).on('click', '.number-spinner button', function (e) {
	  e.preventDefault();
	  var btn = $(this),
	  oldValue = btn.closest('.number-spinner').find('input').val().trim(),
	  newVal = 0;

	  if (btn.attr('data-dir') == 'up') {
	    newVal = parseInt(oldValue) + 1;
	  } else {
	    if (oldValue > 1) {
	      newVal = parseInt(oldValue) - 1;
		} else {
		  newVal = 1;
		}
	  }
	  btn.closest('.number-spinner').find('input').val(newVal);
	});
  });
</script>