javascript - 正则表达式限制输入文本框

Question

大家

我正在开发一个示例 MVC4 项目，在这里我试图通过将值与正则表达式进行比较，确保如果输入的文本不等于十进制值(精度 7 和小数位数 2)，用户无法键入任何内容.

但即使正则表达式测试失败，我也无法限制用户输入。

请找到下面的代码并告诉我。

@Html.TextBoxFor(m => m.inFormModel[count].Unit, new { @type = "number", 
@step = "0.01", @max = "6", @onkeyup = "return isNumberKey(event, this);"}) 

下面是我的 JavaScript 代码

<script type="text/javascript">
function isNumberKey(evt, text) {
    var re = /^(\d{0,5}\.\d{0,2}|\d{0,5}|\.\d{0,2})$/;
    var typedValue = parseFloat(text.value);
    typedValue = typedValue.toFixed(2);
    if (re.test(typedValue) == false)
    {
        alert("does not match");
        return false;
    }
    else
    {
        alert("does match");
        return true;
    }
</script>

我知道我们可以从 MVC 模型注释进行验证，但我想限制用户输入。

提前致谢。

Answer 1

目前还不清楚您要实现的目标，但我将进行有根据的猜测，并说您希望文本框仅接受数字值。通过将类型设置为数字，您可以限制非法字符的键盘输入，但您可能担心人们粘贴不良内容。

无论哪种方式，您都想使用 keydown 事件。另外，请注意您粘贴的代码缺少右括号。

这是一个可能的解决方案。这是我很快就想出来的，所以我确信它可以改进，但你会得到总体的想法:

function isNumberKey(evt, text) 
{       
    if(!isAllowedKey(evt.keyCode)) 
    {
        var existingText = (text.value == null || text.value == "") ? "" : text.value;
        var tentativeValue = existingText + evt.key;
        var result = isNumeric(tentativeValue);         
        return result;
    }    
}

function isNumeric(n) 
{
    return !isNaN(parseFloat(n)) && isFinite(n);
}

function isAllowedKey(keyCode)
{
    var allowedKeys = [13,9,37,39, 46, 8, 16]; //Enter, tab, left, right, period, backspace, shift
    for(i = 0; i < allowedKeys.length; i++)
    {
        if(keyCode == allowedKeys[i])
            return true;
    }
    return false;
}

这是一个工作 fiddle :

https://jsfiddle.net/970oajaj/35/