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>

相关推荐