如何只允许在mvc4razor文本框中的数字
我有3个文本框,其中值的邮政编码和手机号码和住宅号码。 我得到的解决scheme,只允许在文本框中使用jellow来自Bellow post。
我想使EditFor文本框只接受数字
但我们可以做到这一点使用数据注释,因为我使用MVC4razor?
我只是玩弄HTML5inputtypes=数字。 虽然它不支持所有的浏览器,我期望它是前进的方式处理types特定的处理(编号为前)。 使用razor很简单(ex是VB)
@Html.TextBoxFor(Function(model) model.Port, New With {.type = "number"})
并感谢李Richardson,C#的方式
@Html.TextBoxFor(i => i.Port, new { @type = "number" })
超出问题的范围,但你可以对任何html5inputtypes做同样的处理
使用正则expression式,例如
[RegularExpression("([1-9][0-9]*)", ErrorMessage = "Count must be a natural number")] public int Count { get; set; }
@Html.TextBoxFor(m => m.PositiveNumber, new { @type = "number", @class = "span4", @min = "0" })
在使用Razor的MVC 5中,您可以按照上面的示例在匿名对象中添加任何htmlinput属性,以便只允许正数input到input字段中。
在文本框中写这个代码onkeypress="return isNumberKey(event)"
和function,这是正好在下面。
<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>
这对我工作:
<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); } });
请使用DataType属性,但这将除负值,所以下面的正则expression式将避免这种情况
[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; }
can we do this using data annotations as I am using MVC4 razor ?
不,据我了解你的问题,不显眼的validation只会显示erorrs。 最简单的方法是使用jquery插件:
蒙面input插件
在你的脚本中使用这个函数,并在文本框附近放一个跨度来显示错误信息
$(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>
这是可以让你只input数字的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>
希望它可以帮助你。
也许你可以使用[Integer]数据注释(如果使用DataAnnotationsExtensions http://dataannotationsextensions.org/ )。 然而,这只会检查值是一个整数,如果它是填充的(所以你可能还需要[必需的]属性)。
如果启用Unobtrusive Validation,它将validation它在客户端,但是您也应该在您的POST操作中使用Modelstate.Valid来拒绝它,以防人们禁用Javascript。
DataType
有一个接受string的第二个构造函数。 但是,在内部,这实际上与使用UIHint
属性相同。
添加一个新的核心数据types是不可能的,因为DataType
枚举是.NET框架的一部分。 您可以做的最接近的事情是创build一个从DataTypeAttribute
inheritance的新类。 然后,您可以添加一个新的构造函数与您自己的DataType
枚举。
public NewDataTypeAttribute(DataType dataType) : base(dataType) { } public NewDataTypeAttribute(NewDataType newDataType) : base (newDataType.ToString();
你也可以通过这个链接。 但我会推荐你使用JQuery的相同。
嗨尝试以下….
<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; };