如何在 mvc4 razor 中只允许文本框中的数字答案

【问题标题】：How to allow only numbers in textbox in mvc4 razor如何在 mvc4 razor 中只允许文本框中的数字
【发布时间】：2013-02-06 11:29:00
【问题描述】：

我有 3 个文本框，其中包含邮政编码、手机号码和住宅号码。我得到了使用来自 Bellow post 的 jquery 在文本框中只允许数字的解决方案。

I would like to make an EditFor textbox accept numbers only

但是我们可以像我使用 MVC4 razor 一样使用数据注释来做到这一点吗？

【问题讨论】：

您不能这样做，因为数据注释是在您提交表单时调用的，而不是在您向文本框输入数据时调用
虽然是这样，但您可以使用 HTML5 输入类型验证规则（在浏览器支持的情况下）。适用于这个问题场景。
将 jQuery 与 css 类一起使用
Int or Number DataType for DataAnnotation validation attribute的可能重复
@KarthikChintala 这是不正确的。数据注释也用于渲染表单时，以确定客户端 jQuery 验证和各种字段的输入类型。

标签： asp.net-mvc asp.net-mvc-3 asp.net-mvc-4

【解决方案1】：

我只是在玩 HTML5 输入类型=数字。虽然并非所有浏览器都支持它，但我希望它是处理特定类型处理（ex 的数字）的前进方式。用 razor 做起来很简单（例如是 VB）

@Html.TextBoxFor(Function(model) model.Port, New With {.type = "number"})

感谢 Lee Richardson，c# 方式

@Html.TextBoxFor(i => i.Port, new { @type = "number" })

超出了问题的范围，但您可以对任何 html5 输入类型执行相同的方法

【讨论】：

又名@Html.TextBoxFor(i => i.Port, new { @type = "number" })
你也可以输入“-”和“+”这两个不是数字的字符。
除 Opera Mini 外，all major browsers 至少部分支持此功能。
除“-”和“+”字符外，还可以输入“e”字符。我使用了 Donal Lafferty 在他的回答中指出的 Data Annotation + regex。

【解决方案2】：

使用正则表达式，例如

[RegularExpression("([1-9][0-9]*)", ErrorMessage = "Count must be a natural number")]
public int Count { get; set; }

【讨论】：

这应该是答案。

【解决方案3】：

@Html.TextBoxFor(m => m.PositiveNumber, 
                      new { @type = "number", @class = "span4", @min = "0" })

在带有 Razor 的 MVC 5 中，您可以按照上面的示例在匿名对象中添加任何 html 输入属性，以仅允许正数进入输入字段。

【讨论】：

非常简洁的前端验证解决方案。感谢节省我的时间@realaValoro :-)
span4类从何而来？
这只是一个关于如何为文本框指定任何 css 类的示例。

【解决方案4】：

在文本框中写下这段代码onkeypress="return isNumberKey(event)" 和功能就在下面。

<script type="text/javascript">
function isNumberKey(evt)
{
          var charCode = (evt.which) ? evt.which : event.keyCode;
          if (charCode != 46 && charCode > 31 
            && (charCode < 48 || charCode > 57))
             return false;

          return true;
}
</script>

【讨论】：

javascript 事件未定义 firefox
这不适用于许多智能手机，因为按键事件并非在所有手机上都可用。
已回答 MVC4 razr

【解决方案5】：

请使用DataType 属性。这将接受负值，因此下面的正则表达式将避免这种情况：

   [DataType(DataType.PhoneNumber,ErrorMessage="Not a number")]
   [Display(Name = "Oxygen")]
   [RegularExpression( @"^\d+$")]
   [Required(ErrorMessage="{0} is required")]
   [Range(0,30,ErrorMessage="Please use values between 0 to 30")]
    public int Oxygen { get; set; }

【讨论】：

【解决方案6】：

这对我有用：

<input type="text" class="numericOnly" placeholder="Search" id="txtSearch">

Java脚本：

//Allow users to enter numbers only
$(".numericOnly").bind('keypress', function (e) {
    if (e.keyCode == '9' || e.keyCode == '16') {
        return;
    }
    var code;
    if (e.keyCode) code = e.keyCode;
    else if (e.which) code = e.which;
    if (e.which == 46)
        return false;
    if (code == 8 || code == 46)
        return true;
    if (code < 48 || code > 57)
        return false;
});

//Disable paste
$(".numericOnly").bind("paste", function (e) {
    e.preventDefault();
});

$(".numericOnly").bind('mouseenter', function (e) {
    var val = $(this).val();
    if (val != '0') {
        val = val.replace(/[^0-9]+/g, "")
        $(this).val(val);
    }
});

【讨论】：

这不适用于许多智能手机，因为按键事件并非在所有手机上都可用。

【解决方案7】：

在您的脚本中使用此函数并在文本框附近放置一个跨度以显示错误消息

$(document).ready(function () {
    $(".digit").keypress(function (e) {
        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
            $("#errormsg").html("Digits Only").show().fadeOut("slow");
            return false;
        }
    });
});

@Html.TextBoxFor(x => x.company.ContactNumber, new { @class = "digit" })
<span id="errormsg"></span>

【讨论】：

赞成简单的解决方案。我不知道为什么他们没有将其标记为像魅力一样工作的答案
这不适用于许多智能手机，因为按键事件并非在所有手机上都可用。

【解决方案8】：

对于大于零的十进制值，HTML5 的工作方式如下：

<input id="txtMyDecimal" min="0" step="any" type="number">

【讨论】：

那么你如何使用 razor 中的 HTMLhelper 做到这一点？
我尝试使用 Razor，但在搜索了很长时间后，我找不到这么干净的解决方案。

【解决方案9】：

can we do this using data annotations as I am using MVC4 razor ?

不，据我了解您的问题，不显眼的验证只会显示错误。最简单的方法是使用jquery插件：

Masked Input Plugin

【讨论】：

【解决方案10】：

这是只允许您输入数字的 javascript。

为文本框订阅onkeypress 事件。

@Html.TextBoxFor(m=>m.Phone,new { @onkeypress="OnlyNumeric(this);"})

这里是它的 javascript：

<script type="text/javascript">
function OnlyNumeric(e) {
            if ((e.which < 48 || e.which > 57)) {
                if (e.which == 8 || e.which == 46 || e.which == 0) {
                    return true;
                }
                else {
                    return false;
                }
            }
        }
</script>

希望对你有所帮助。

【讨论】：

并非所有代码路径都返回一个值，它对我不起作用
这不适用于许多智能手机，因为按键事件并非在所有手机上都可用。

【解决方案11】：

也许您可以使用 [Integer] 数据注释（如果您使用 DataAnnotationsExtensions http://dataannotationsextensions.org/）。但是，这只会检查值是否为整数，而不检查是否已填写（因此您可能还需要 [Required] 属性）。

如果您启用不引人注目的验证，它将在客户端验证它，但您还应该在您的 POST 操作中使用 Modelstate.Valid 来拒绝它，以防人们禁用了 Javascript。

【讨论】：

【解决方案12】：

DataType 有第二个构造函数，它接受一个字符串。但是，在内部，这实际上与使用UIHint 属性相同。

无法添加新的核心 DataType，因为 DataType 枚举是 .NET 框架的一部分。您可以做的最接近的事情是创建一个继承自DataTypeAttribute 的新类。然后你可以用你自己的DataType枚举添加一个新的构造函数。

public NewDataTypeAttribute(DataType dataType) : base(dataType)
 { }

public NewDataTypeAttribute(NewDataType newDataType) : base (newDataType.ToString();

您也可以通过this 链接。但我会推荐你使用 Jquery。

【讨论】：

【解决方案13】：

你好，试试下面的……

<div class="editor-field">
  <%: Html.TextBoxFor(m => m.UserName, new {onkeydown="return ValidateNumber(event);" })%>
  <%: Html.ValidationMessageFor(m => m.UserName) %>
</div>

脚本

<script type="text/javascript">
   function ValidateNumber(e) {
       var evt = (e) ? e : window.event;
       var charCode = (evt.keyCode) ? evt.keyCode : evt.which;
       if (charCode > 31 && (charCode < 48 || charCode > 57)) {
           return false;
       }
       return true;
   };

【讨论】：

这不适用于许多智能手机，因为按键事件并非在所有手机上都可用。

【解决方案14】：

@Html.TextBoxFor(x => x.MobileNo, new { @class = "digit" , @maxlength = "10"})

@section Scripts 
{
    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/cssjqryUi")

    <script type="text/javascript">
         $(".digit").keypress(function (e) {
            if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) 
            {
                $("#errormsg").html("Digits Only").show().fadeOut("slow");
                return false;
            }
         });
    </script>
}

【讨论】：

【解决方案15】：

使用 type="number"

【讨论】：

【解决方案16】：

function NumValidate(e) {
    var evt = (e) ? e : window.event;
    var charCode = (evt.keyCode) ? evt.keyCode : evt.which;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        alert('Only Number ');
        return false;
    }    return true;
}  function NumValidateWithDecimal(e) {

var evt = (e) ? e : window.event;
var charCode = (evt.keyCode) ? evt.keyCode : evt.which;

if (!(charCode == 8 || charCode == 46 || charCode == 110 || charCode == 13 || charCode == 9) && (charCode < 48 || charCode > 57)) {
    alert('Only Number With desimal e.g.: 0.0');
    return false;
}
else {
    return true;
} } function onlyAlphabets(e) {
try {
    if (window.event) {
        var charCode = window.event.keyCode;
    }
    else if (e) {
        var charCode = e.which;
    }
    else { return true; }

    if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123) || (charCode == 46) || (charCode == 32))
        return true;
    else
        alert("Only text And White Space And . Allow");
    return false;

}
catch (err) {
    alert(err.Description);
}} function checkAlphaNumeric(e) {

if (window.event) {
    var charCode = window.event.keyCode;
}
else if (e) {
    var charCode = e.which;
}
else { return true; }

if ((charCode >= 48 && charCode <= 57) || (charCode >= 65 && charCode <= 90) || (charCode == 32) || (charCode >= 97 && charCode <= 122)) {
    return true;
} else {
    alert('Only Text And Number');
    return false;
}}

【讨论】：

简单介绍一下您的解决方案怎么样？
通常最好解释一个解决方案，而不是仅仅发布一些匿名代码行。你可以阅读How do I write a good answer，也可以阅读Explaining entirely code-based answers