JS实现商品购买数量加减
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>