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>