html5中输入值模式的限制

Question

如何设置输入文本框的最小值和最大值。我尝试但不起作用。如何解决此问题？ 此模式最多仅支持10个，但我希望100到100000，那么如何更改该模式呢？

 <input type="number" placeholder="User Id" required  pattern="(10|([1-2][0-9])|[1-9])"  [(ngModel)]="userId" name="userId"  #pickedId="ngModel">

Answer 1

尝试使用min和max属性。

 <input type="number" min="1" max="999" />

Answer 2

尝试一下：

legend {
    background-color: #000;
    color: #fff;
    padding: 3px 6px;
}

.output {
    font: 1rem 'Fira Sans', sans-serif;
}

input,
label {
    width: 43%;
}

input {
    margin: 1rem 0;
}

label {
    display: inline-block;
    font-size: .8rem;
}

input:invalid + span:after {
    content: '✖';
    color: #f00;
    padding-left: 5px;
}

input:valid + span:after {
    content: '✓';
    color: #26b72b;
    padding-left: 5px;
}

 <span class="validity"></span>

<input type="number" id="userId" name="userId"
           placeholder="Min: 100, max: 10000"
           min="100" max="10000" />
    <span class="validity"></span>