Html：JavaScript：输入：razor:minRange 和 maxRange

Question

我有一个设置了 minRange 和 maxRange 的输入元素，我正在尝试获取自定义有效性消息。我还有一个 Input TagHelper 来编写我试图在客户端覆盖的自定义消息。到目前为止我已经试过了，但似乎没有用。

<input asp-for="Amount" minRange="50.00" maxRange="100.00" oninput="check(this)" />



<script type="text/javascript">
  function check(input) {
    if (input.validity.rangeUnderflow || input.validity.rangeOverflow) {
      input.setCustomValidity("Please enter an amount between .00 and 0.00.");
    }

  }
</script>

已渲染 html:

<input oninput="check(this)" type="text" data-val="true" data-val-number="The field Amount must be a number." data-val-required="The Amount field is required." id="Model_Amount" name="Model.Amount" value="97.95" data-val-range-min="50.00" data-val-range-max="100.00" data-val-range="Please enter an Amount between 50.00 and 100.00" class="form-control valid" placeholder="Amount" aria-required="true" aria-invalid="false" aria-describedby="Model_Amount-error">

它仍然输入“请输入介于 50.00 和 100.00 之间的金额”

输入标签助手：

    public override void Process(TagHelperContext context, TagHelperOutput output)
        {
          if (MinRange != null && MaxRange != null)
            {                    
                TagHelperAttribute minAttr = new TagHelperAttribute("data-val-range-min", MinRange);
                output.Attributes.Add(minAttr);
                TagHelperAttribute maxAttr = new TagHelperAttribute("data-val-range-max", MaxRange);
                output.Attributes.Add(maxAttr);
                TagHelperAttribute rangeAttr = new TagHelperAttribute("data-val-range", string.Format("Please enter a {0} between {1} and {2}", DisplayName, MinRange, MaxRange));
                output.Attributes.Add(rangeAttr);
            }
    }

感谢任何帮助。谢谢 NH

Answer 1

更改了您的代码并添加了一些注释。希望这有帮助

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>

<!-- Change minRange/maxRange to just min/max -->
<input asp-for="Amount" min="50.00" max="100.00" oninput="check(this)" />

<span id="display"></span>

</body>
<script type="text/javascript">

function check(input) {
    //Get current input field value
    var num = parseInt(document.querySelector('input').value);

    //Check if num is < or > than input.min/max
    if(num >= input.min && num <= input.max){
        document.getElementById('display').innerText = '';
    }else{
        document.getElementById('display').innerText = 'Number must be between 50 and 100';
    }
}

    
</script>
</html>

Html：JavaScript：输入：razor:minRange 和 maxRange

Html: JavaScript: input: razor:minRange and maxRange

html

checkvalidity