输入数字和小数的掩码

时间:2013-08-16 09:09:04

标签: javascript jquery html regex input-mask

我在测试了我的程序后意识到了一个软件应用程序管理发票我注意到以下错误: 我在sqlserver中的表包含:price numeric(6,2) 我的程序的用户输入价格为555.00是好的。 但是当他把555555放错了,所以我需要指定一个掩码,其中尾数是可选的0到999,小数部分是可编程的2或3根据用户的选择,我使用的是JQuery Masked输入插件,我有没有找到好的正则表达式,请帮忙,我正在使用jsp / servlet。

8 个答案:

答案 0 :(得分:21)

您可以使用jquery numeric作为数字 当前版本确实允许您正在寻找的内容,但有人changed代码有点且有效:

<强> HTML

<input class="numeric" type="text" />

<强>的Javascript

$(".numeric").numeric({ decimal : ".",  negative : false, scale: 3 });

这是整个source 我准备了这个fiddle,这样你就可以看到它是如何运作的。

答案 1 :(得分:8)

使用jQuery输入掩码插件(6个整数和2个小数位):

HTML:

<input class="mask" type="text" />

jQuery的:

$(".mask").inputmask('Regex', {regex: "^[0-9]{1,6}(\\.\\d{1,2})?$"});

我希望这有助于某人

答案 2 :(得分:3)

您可以使用jquery inputmask插件执行此操作。

HTML:

<input id="price" type="text">

使用Javascript:

$('#price').inputmask({alias: 'numeric', 
                       allowMinus: false,  
                       digits: 2, 
                       max: 999.99});

答案 3 :(得分:1)

<input type="text" onkeypress="handleNumber(event, '€ {-10,3} $')" placeholder="€  $" size=25>

function handleNumber(event, mask) {
    /* numeric mask with pre, post, minus sign, dots and comma as decimal separator
        {}: positive integer
        {10}: positive integer max 10 digit
        {,3}: positive float max 3 decimal
        {10,3}: positive float max 7 digit and 3 decimal
        {null,null}: positive integer
        {10,null}: positive integer max 10 digit
        {null,3}: positive float max 3 decimal
        {-}: positive or negative integer
        {-10}: positive or negative integer max 10 digit
        {-,3}: positive or negative float max 3 decimal
        {-10,3}: positive or negative float max 7 digit and 3 decimal
    */
    with (event) {
        stopPropagation()
        preventDefault()
        if (!charCode) return
        var c = String.fromCharCode(charCode)
        if (c.match(/[^-\d,]/)) return
        with (target) {
            var txt = value.substring(0, selectionStart) + c + value.substr(selectionEnd)
            var pos = selectionStart + 1
        }
    }
    var dot = count(txt, /\./, pos)
    txt = txt.replace(/[^-\d,]/g,'')

    var mask = mask.match(/^(\D*)\{(-)?(\d*|null)?(?:,(\d+|null))?\}(\D*)$/); if (!mask) return // meglio exception?
    var sign = !!mask[2], decimals = +mask[4], integers = Math.max(0, +mask[3] - (decimals || 0))
    if (!txt.match('^' + (!sign?'':'-?') + '\\d*' + (!decimals?'':'(,\\d*)?') + '$')) return

    txt = txt.split(',')
    if (integers && txt[0] && count(txt[0],/\d/) > integers) return
    if (decimals && txt[1] && txt[1].length > decimals) return
    txt[0] = txt[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.')

    with (event.target) {
        value = mask[1] + txt.join(',') + mask[5]
        selectionStart = selectionEnd = pos + (pos==1 ? mask[1].length : count(value, /\./, pos) - dot) 
    }

    function count(str, c, e) {
        e = e || str.length
        for (var n=0, i=0; i<e; i+=1) if (str.charAt(i).match(c)) n+=1
        return n
    }
}

答案 4 :(得分:1)

使用拖曳功能来解决它​​,非常简单和有用:

HTML:

<input class="int-number" type="text" />
<input class="decimal-number" type="text" />

jQuery:

//Integer Number
$(document).on("input", ".int-number", function (e) {
  this.value = this.value.replace(/[^0-9]/g, '');
});

//Decimal Number
$(document).on("input", ".decimal-number", function (e) {
    this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
});

答案 5 :(得分:0)

现在我更了解你需要什么,这就是我的建议。为您的文本框添加一个keyup处理程序,使用此正则表达式^[0-9]{1,14}\.[0-9]{2}$检查文本框内容,如果它不匹配,请将背景设置为红色或显示文本或任何您喜欢的内容。这是放入document.ready

的代码
$(document).ready(function() {
    $('selectorForTextbox').bind('keyup', function(e) {
        if (e.srcElement.value.match(/^[0-9]{1,14}\.[0-9]{2}$/) === null) {
            $(this).addClass('invalid');
        } else {
            $(this).removeClass('invalid');
        }
    });
});

以下是JSFiddle的实际操作。此外,执行相同的正则表达式服务器端,如果不匹配,则不满足要求。您还可以检查onsubmit事件,如果正则表达式不匹配,则不要让用户提交页面。

在插入文本时不强制执行掩码的原因是它使事情复杂化,例如,正如我在评论中提到的,用户无法开始输入有效输入,因为它的开始无效。虽然有可能,但我建议这样做。

答案 6 :(得分:0)

试试imaskjs。它有Number,RegExp和其他掩码。扩展非常简单。

答案 7 :(得分:0)

如果您的系统是英语,请使用@Rick答案:

如果您的系统是巴西葡萄牙语,请使用此:

导入:

<script
        src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script     src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.2.6/jquery.inputmask.bundle.min.js"></script>

HTML:

<input class="mask" type="text" />

JS:

$(".mask").inputmask('Regex', {regex: "^[0-9]{1,6}(\\,\\d{1,2})?$"});

这是因为在巴西葡萄牙语中我们写的是“ 1.000.000,00”,而不是英文的“ 1,000,000.00”,所以如果您使用“”。系统将无法理解小数点。

就是这样,我希望它能对某人有所帮助。我花了很多时间来理解它。