1、效果图:
2、JS验证方法:
??? var min=1;? 
???? function reg(x) {? 
??????? jQuery('#J_Tip').html("");? 
??????? jQuery('#J_Tip').hide();? 
??????? return new RegExp("^[1-9]\\d*$").test(x);? 
??? } 
??? function amount(obj, mode) {? 
??????? var x = jQuery(obj).val();? 
??????? if (this.reg(parseInt(x))) {? 
??????????? if (mode) {? 
??????????????? x++;? 
??????????? } else {? 
??????????????? x--;? 
??????????? }? 
??????? } else {? 
??????????? jQuery('#J_Tip').html("<i class=\"ico\"></i>请输入正确的数量!");? 
??????????? jQuery('#J_Tip').show();? 
??????????? jQuery(obj).val(1);? 
??????????? jQuery(obj).focus();? 
??????? }? 
??????? return x;? 
??? } 
??? function reduce(obj) {? 
??????? var x = this.amount(obj, false);? 
??????? if (parseInt(x) >= this.min) {? 
??????????? jQuery(obj).val(x);? 
??????? } else {? 
??????????? jQuery('#J_Tip').html("<i class=\"ico\"></i>商品数量最少为" + this.min? 
??????????????????? + "!");? 
??????????? jQuery('#J_Tip').show();? 
??????????? jQuery(obj).val(1);? 
??????????? jQuery(obj).focus();? 
??????? }? 
??? } 
??? function add(obj) {? 
??????? var x = this.amount(obj, true);? 
??????? var max = jQuery('#nAmount').val();? 
??????? if (parseInt(x) <= parseInt(max)) {? 
??????????? jQuery(obj).val(x);? 
??????? } else {? 
??????????? jQuery('#J_Tip').html("<i class=\"ico\"></i>您所填写的商品数量超过库存!");? 
??????????? jQuery('#J_Tip').show();? 
??????????? jQuery(obj).val(max == 0 ? 1 : max);? 
??????????? jQuery(obj).focus();? 
??????? }? 
??? }
??? function modify(obj) {? 
??????? var x = jQuery(obj).val();? 
??????? var max = jQuery('#nAmount').val();? 
??????? if (!this.reg(parseInt(x))) {? 
??????????? jQuery(obj).val(1);? 
??????????? jQuery(obj).focus();? 
??????????? jQuery('#J_Tip').html("<i class=\"ico\"></i>请输入正确的数量!");? 
??????????? jQuery('#J_Tip').show();? 
??????????? return;? 
??????? }? 
??????? var intx = parseInt(x);? 
??????? var intmax = parseInt(max);? 
??????? if (intx < this.min) {? 
??????????? jQuery('#J_Tip').html("<i class=\"ico\"></i>商品数量最少为" + this.min? 
??????????????????? + "!");? 
??????????? jQuery('#J_Tip').show();? 
??????????? jQuery(obj).val(this.min);? 
??????????? jQuery(obj).focus();? 
??????? } else if (intx > intmax) {? 
??????????? jQuery('#J_Tip').html("<i class=\"ico\"></i>您所填写的商品数量超过库存!");? 
??????????? jQuery('#J_Tip').show();? 
??????????? jQuery(obj).val(max == 0 ? 1 : max);? 
??????????? jQuery(obj).focus();? 
??????? }? 
??? }
3、html代码:
??? ????? ??? <dt>
??? ????? ??? <span class="li_hd">购买数量:</span>
??? ????? ??? </dt>
??? ????? ??? <dd>
??? ??? ??????? <a class="num_oper num_min" href="javascript:reduce('#J_Amount');">-</a>? 
??? ??? ??????? <input name="J_Amount" id="J_Amount" class="input_txt" type="text" maxlength="6" value="1" size="3" onkeyup="modify('#J_Amount');"/>? 
??? ??? ??????? <a class="num_oper num_plus" href="javascript:add('#J_Amount')">+</a>? 
??? ??? ??????? <p class="caution_tips" id="J_Tip" style="display:none;"></p>? 
??? ??? ??????? <input id="nAmount" type="hidden" value="1000"/>??? ????? ??? 
??? ????? ??? </dd>
