我有3个文本框,其中包含邮政编码,手机号码和住宅号码。我从Bellow帖子获得了使用jquery在文本框中仅允许数字的解决方案。
但是我们可以像使用MVC4剃刀一样使用数据注释来做到这一点吗?
Answers:
我只是在玩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输入类型执行相同的方法
@Html.TextBoxFor(m => m.PositiveNumber,
new { @type = "number", @class = "span4", @min = "0" })
在带有Razor的MVC 5中,您可以按照上述示例在匿名对象中添加任何html输入属性,以仅在输入字段中添加正数。
在文本框中编写此代码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>
请使用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; }
这为我工作:
<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);
}
});
在脚本中使用此功能,并在文本框附近放置一个跨度以显示错误消息
$(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>
这是允许您仅输入数字的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/)。但是,这只会检查该值是否为整数,如果填充了该值,则不会检查(因此,您可能还需要[Required]属性)。
如果启用了Unobtrusive Validation,它将在客户端进行验证,但是如果人们禁用了Javascript,还应该在POST操作中使用Modelstate.Valid拒绝它。
DataType
有第二个构造函数,它接受一个字符串。但是,在内部,这实际上与使用该UIHint
属性相同。
由于DataType
枚举是.NET框架的一部分,因此无法添加新的核心DataType 。您可以做的最接近的事情是创建一个继承自的新类DataTypeAttribute
。然后,您可以使用自己的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;
};
@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>
}
<input type =“ number” @ bind =“ Quantity” class =“ txt2” />
使用type =“ number”
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;
}}