如何在CSHTML中进行输入验证?

我正在尝试做一个输入验证,以便我让用户输入一个数字,我想检查它是一个数字。当我单击提交按钮时,我希望它检查它是否是数字。如果是我想要一条消息,请说明已成功添加其他错误消息,请输入有效数字。这是我目前为输入文本框和提交按钮的代码。如何继续添加验证和错误消息?

<div class="form-group">
    <input class="form-control" id="hours" name="hours" type="text" pattern="\d{1,2}" title="NumberOfHoursAlloted" value=@ViewBag.Hours>
    <input class="btn btn-block" type="submit" onclick="verifyCheckboxes()" value="Submit" />
</div>

回答 1

  1. 赞同 1

    最少在谷歌浏览器上pattern="\d{1,2}"只允许您插入数字1或2.请参阅代码波纹镜头。使用JavaScript,可以看出您是否输入了一个数字。要这样做,我正在使用isNaN() Function.您可以从此链接中阅读更多信息:https://www.w3schools.com/jsref/jsref_isnan.asp

    myform = document.getElementById('myform');
    myform.addEventListener('submit', verifyCheckboxes);
    function verifyCheckboxes(e)
    {
        let user_value = document.getElementById("hours").value;
         
        if(isNaN(user_value))//determines whether a value is an illegal number
      {
        document.getElementById("demo").innerHTML = "Please enter a numaric value";
        e.preventDefault();//This will prevent the form from going to action_page.php
      }
      else
      {
        alert("Your input is valid. Redirecting you to action_page.php");
      }
    }
    <form id="myform" action="/action_page.php">
      <label>Enter number of hours:</label>
      <input class="form-control" id="hours" name="hours" type="text" title="NumberOfHoursAlloted"> 
      <div style="color: red" id="demo"></div>
      <input class="btn btn-block" type="submit" value="Submit">
    </form> 

    NewGuy