mvc4 razor의 텍스트 상자에 숫자 만 허용하는 방법

우편 번호와 휴대 전화 번호, 거주지 번호를 입력하는 텍스트 상자가 3 개 있습니다. Bellow 게시물의 jquery를 사용하여 텍스트 상자에 숫자 만 허용하는 솔루션이 있습니다.

EditFor 텍스트 상자에 숫자 만 허용하고 싶습니다.

하지만 MVC4 면도기를 사용하면서 데이터 주석을 사용하여이 작업을 수행 할 수 있습니까?

나는 HTML5 입력 type = number를 가지고 놀았습니다. 모든 브라우저에서 지원되는 것은 아니지만 유형별 처리 (예 : 숫자)를 처리하는 방법이 될 것으로 예상합니다. 면도기로하는 것은 매우 간단합니다 (예 : VB).

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

Lee Richardson에게 감사합니다.

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

질문의 범위를 벗어나지 만 모든 html5 입력 유형에 대해 이와 동일한 접근 방식을 수행 할 수 있습니다.

정규식을 사용하십시오.

[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에서는 위의 예에 따라 익명 개체에 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>

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

아니요, 귀하의 질문을 이해하므로 눈에 띄지 않는 유효성 검사는 오류 만 표시합니다. 가장 간단한 방법은 jquery 플러그인을 사용하는 것입니다.

마스킹 된 입력 플러그인

다음은 숫자 만 입력 할 수있는 자바 스크립트입니다.

onkeypress텍스트 상자에 대한 이벤트를 구독하십시오 .

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

이에 대한 자바 스크립트는 다음과 같습니다.

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

도움이 되었기를 바랍니다.

0보다 큰 10 진수 값의 경우 HTML5는 다음과 같이 작동합니다.

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

[Integer] 데이터 주석을 사용할 수 있습니다 (DataAnnotationsExtensions http://dataannotationsextensions.org/ 를 사용하는 경우 ). 그러나 이것은 값이 정수인지 여부 만 확인하고 채워져 있으면 확인하지 않습니다 (따라서 [Required] 속성도 필요할 수 있음).

Unobtrusive Validation을 활성화하면 클라이언트 측에서 유효성을 검사하지만 사람들이 Javascript를 비활성화 한 경우 거부하려면 POST 작업에서 Modelstate.Valid를 사용해야합니다.

DataType문자열을받는 두 번째 생성자가 있습니다. 그러나 내부적으로 이것은 실제로 UIHint속성 을 사용하는 것과 동일 합니다.

DataType열거가 .NET 프레임 워크의 일부 이기 때문에 새로운 핵심 DataType을 추가 할 수 없습니다 . 가장 가까운 방법은 .NET Framework에서 상속하는 새 클래스를 만드는 것 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;
}}