如何在 AngularJS 中设置范围验证

How to set range validation in AngularJS

本文关键字：设置 范围 验证 AngularJS      更新时间：2023-09-26

我想设置范围验证，即我希望薪水应该在 100000-20000000 之间。我使用了ng-min和ng-max。但它仍然没有抛出错误消息。这是我所做的。它唯一的检查数字验证。 

<input ng-model="name2" name="name2" type="text" class="zoomIn" ng-min="100000" ng-max="20000000" ng-pattern="/^'d+$/" placeholder="Your Annual Net Profit" required>
<div ng-messages="step5form.name2.$error">
<div ng-message="min">Please enter a value between 100000 and 20000000.</div>
<div ng-message="max">Please enter a value between 100000 and 20000000.</div>
<div ng-message="pattern">Annual net profit cannot be characters.</div>
</div>

我认为你应该先尝试阅读AngularJs文档。

这里你使用的是type="text"，

对于类型文本，有ng-minlength和ng-maxlength，而对于type="number"，有min和max属性。

<input ng-model="name2" name="name2" type="number" class="zoomIn" min="2" max="4" ng-pattern="/^'d+$/" placeholder="Your Annual Net Profit" required>
<div ng-messages="step5form.name2.$error">
<div ng-message="min">Please enter a value between 100000 and 20000000.</div>
<div ng-message="max">Please enter a value between 100000 and 20000000.</div>
<div ng-message="pattern">Annual net profit cannot be characters.</div>

希望这对您有所帮助。

更新 ：要删除输入微调器，请添加此 css

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type="number"] {
    -moz-appearance: textfield;
}

以 Angular 方式使用： 

<input type="number"
       ng-model="string"
       [name="string"]
       [min="string"]
       [max="string"]
       [required="string"]
       [ng-required="string"]
       [ng-minlength="number"]
       [ng-maxlength="number"]
       [pattern="string"]
       [ng-pattern="string"]
       [ng-change="string"]>

角度方式 - 更多细节

或按自己的目录

http://jsfiddle.net/webvitaly/AG2wf/1/

相关文章：