如何在MVC4剃须刀的文本框中仅允许数字


83

我有3个文本框,其中包含邮政编码,手机号码和住宅号码。我从Bellow帖子获得了使用jquery在文本框中仅允许数字的解决方案。

我想让一个EditFor文本框仅接受数字

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


1
您无法执行此操作,因为在提交表单时会调用数据注释,而不是在将数据输入文本框时调用数据注释
Karthik Chintala 2013年

确实如此,但是您可以使用HTML5输入类型验证规则(受浏览器支持)。在此问题场景中有效。
哈森布罗帕13年

将jQuery与css类一起使用


@KarthikChintala那是不正确的。数据批注还用于呈现表单时,以确定客户端jQuery验证和各个字段的输入类型。
ProfK

Answers:


102

我只是在玩HTML5输入type = number。尽管并非所有浏览器都支持它,但我希望它是处理类型特定处理(例如ex的数字)的方式。用剃须刀做起来非常简单(例如VB)

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

并感谢Lee Richardson的C#方式

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

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


9
aka @ Html.TextBoxFor(i => i.Port,新的{@type =“ number”})
Lee Richardson

2
您也可以输入不是数字的字符“-”和“ +”。
金发先生

除Opera Mini之外,所有主要浏览器都至少部分支持此功能。
Tobias J

除了“-”和“ +”字符外,您还可以输入“ e”字符。正如Donal Lafferty在他的回答中所指出的,我使用了数据注释+正则表达式。
alejandro zuleta

60

使用正则表达式,例如

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

2
这应该是答案。

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

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


前端验证的非常简洁的解决方案。感谢您节省时间@realaValoro :-)
Asif Mehmood

span4类来自哪里?
mischka

这只是有关如何为文本框指定任何CSS类的示例。
diegosasw

15

在文本框中编写此代码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剃须刀得到了答案
Shwet '16

9

请使用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; }

8

这为我工作:

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

Javacript:

//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);
    }
});

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

5

在脚本中使用此功能,并在文本框附近放置一个跨度以显示错误消息

$(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>

支持简单的解决方案。我不知道为什么他们没有将其标记为有魅力的答案
ImranNaqvi 2015年

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

3

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

不,据我所知,您的问题是,无干扰的验证只会显示出错误。最简单的方法是使用jquery插件:

屏蔽输入插件


2

这是允许您仅输入数字的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>

希望对您有帮助。


并非所有代码路径都返回一个值,并且对我不起作用

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

2

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

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

以及如何使用剃刀中的HTMLhelper做到这一点?
LarryBud

我尝试使用Razor,但经过很长一段时间的搜索,我找不到如此干净的解决方案。
克里斯·J

1

也许您可以使用[Integer]数据注释(如果您使用DataAnnotationsExtensions http://dataannotationsextensions.org/)。但是,这只会检查该值是否为整数,如果填充了该值,则不会检查(因此,您可能还需要[Required]属性)。

如果启用了Unobtrusive Validation,它将在客户端进行验证,但是如果人们禁用了Javascript,还应该在POST操作中使用Modelstate.Valid拒绝它。


0

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

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

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

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

您也可以通过链接。但是我建议您使用Jquery相同。


0

嗨,尝试以下。

<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;
   };

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

0
@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>
}


-1
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;
}}

2
对您的解决方案进行一点描述呢?
Jack Flamp

通常,最好解释一个解决方案,而不是仅仅发布一些匿名代码行。您可以阅读《我如何写一个好的答案》,也可以解释完全基于代码的答案
Anh Pham
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.