Cách chỉ cho phép các số trong hộp văn bản trong dao cạo mvc4

Tôi có 3 hộp văn bản nhận các giá trị mã bưu điện & số điện thoại di động & số nhà. Tôi đã nhận được giải pháp cho phép chỉ số trong hộp văn bản bằng cách sử dụng jquery từ bài đăng dưới đây.

Tôi muốn tạo một hộp văn bản EditFor chỉ chấp nhận số

nhưng chúng ta có thể làm điều này bằng cách sử dụng chú thích dữ liệu như tôi đang sử dụng dao cạo MVC4 không?

tôi chỉ chơi xung quanh với kiểu nhập HTML5 = number. trong khi nó không được hỗ trợ bởi tất cả các trình duyệt, tôi hy vọng nó là cách tiếp theo để xử lý xử lý loại cụ thể (số cho ví dụ). khá đơn giản để làm với dao cạo (ví dụ: VB)

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

và cảm ơn Lee Richardson, cách c #

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

vượt ra ngoài phạm vi của câu hỏi nhưng bạn có thể thực hiện cùng cách tiếp cận này cho bất kỳ loại đầu vào html5 nào

Sử dụng một biểu thức chính quy, ví dụ:

[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" })

trong MVC 5 với Razor, bạn có thể thêm bất kỳ thuộc tính đầu vào html nào trong đối tượng ẩn danh theo ví dụ trên để chỉ cho phép các số dương vào trường đầu vào.

trong hộp văn bản viết mã này onkeypress="return isNumberKey(event)" và chức năng cho điều này ngay bên dưới.

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

Vui lòng sử dụng thuộc tính DataType nhưng điều này sẽ ngoại trừ các giá trị âm nên biểu thức chính quy bên dưới sẽ tránh điều này

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

Điều này đã làm việc cho tôi:

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

Sử dụng chức năng này trong tập lệnh của bạn và đặt khoảng trắng gần hộp văn bản để hiển thị thông báo lỗi

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

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

Không, như tôi hiểu câu hỏi của bạn, việc xác thực không phô trương sẽ chỉ hiển thị các dấu hiệu. Cách đơn giản nhất là sử dụng plugin jquery:

Plugin đầu vào có mặt nạ

Đây là đoạn mã javascript cho phép bạn chỉ nhập các số.

Đăng ký onkeypresssự kiện cho hộp văn bản.

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

Đây là javascript cho nó:

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

Hy vọng nó sẽ giúp bạn.

đối với các giá trị thập phân lớn hơn 0, HTML5 hoạt động như sau:

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

Có thể bạn có thể sử dụng chú thích dữ liệu [Integer] (Nếu bạn sử dụng DataAnnotationsExtensions http://dataannotationsextensions.org/ ). Tuy nhiên, wil này chỉ kiểm tra xem giá trị có phải là số nguyên hay không, nếu nó được điền vào (Vì vậy, bạn cũng có thể cần thuộc tính [Bắt buộc]).

Nếu bạn bật Xác thực không phô trương, nó sẽ xác thực nó ở phía máy khách, nhưng bạn cũng nên sử dụng Modelstate.Valid trong hành động POST của mình để từ chối nó trong trường hợp mọi người đã tắt Javascript.

DataTypecó một hàm tạo thứ hai nhận một chuỗi. Tuy nhiên, bên trong, điều này thực sự giống như việc sử dụngUIHint thuộc tính.

Không thể thêm DataType lõi mới vì kiểu DataTypeliệt kê là một phần của .NET framework. Điều gần nhất bạn có thể làm là tạo một lớp mới kế thừa từ DataTypeAttribute. Sau đó, bạn có thể thêm một hàm tạo mới với kiểu DataTypeliệt kê của riêng bạn .

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

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

Bạn cũng có thể đi qua liên kết này . Nhưng tôi sẽ khuyên bạn sử dụng Jquery cho tương tự.

Xin chào, hãy thử cách sau ....

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

KỊCH BẢN

<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 = "Số lượng" class = "txt2" />

Sử dụng 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;
}}