两个数字的输入字段验证

我似乎被我在输入字段中传递的2个数字的验证问题困住了。我在输入中提供2个数字，例如num1和num2。 num2必须大于num1。如果不是，那么我需要显示一条错误消息。这是我到目前为止所尝试的。我没有看到一致显示的错误消息。如果有人能指出我可能错过了什么，请欣赏它。两个数字的输入字段验证

JSFiddle

<input name="num1" type="text" ng-model="num1" placeholder="num1"> 
<input name="num2" type="text" ng-model="num2" placeholder="num2"> 
<span ng-show="num1>num2">Num2 cannot be lesser than num1</span>

来源

2017-07-04 Ajay K

在的jsfiddle它的工作。你的情况不起作用？ –

您可以用几种方式

第一个是改变输入类型设置为数字

var app = angular.module("Demo", []); 
 
app.controller("AppController", function($scope) { 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div ng-app="Demo"> 
 
    <div ng-controller="AppController"> 
 
    <div ng-form="regForm"> 
 
     <input name="num1" type="number" ng-model="num1" placeholder="num1"> 
 
     <input name="num2" type="number" ng-model="num2" placeholder="num2"> 
 
     <span ng-show="num1>num2">Num2 cannot be lesser than num1</span> 
 
    </div> 
 
    </div> 
 
</div>

另一种是使用输入文本和关联的控制器函数到ng-show，以便它比较整数而不是字符串值

var app = angular.module("Demo", []); 
 
app.controller("AppController", function($scope) { 
 
    $scope.checkNum = function(){ 
 
     return parseInt($scope.num1) > parseInt($scope.num2) 
 
} 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div ng-app="Demo"> 
 
    <div ng-controller="AppController"> 
 
    <div ng-form="regForm"> 
 
     <input name="num1" type="text" ng-model="num1" placeholder="num1"> 
 
     <input name="num2" type="text" ng-model="num2" placeholder="num2"> 
 
     <span ng-show="checkNum()">Num2 cannot be lesser than num1</span> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-07-04 14:03:37

你的提琴似乎工作，也许除了该消息也显示当NUM2是空的。将type="text"更改为"type="number"可使其行为更像您所期望的。

来源

2017-07-04 14:01:40 Remko

你怎么能说，“你的小提琴似乎工作，除了也可以显示，当num2是空的消息。”ng-show =“num1> num2”比较字符串值和您的描述并不意味着这一点。你的意思完全不同。尽管如此，我不明白为什么人们放弃投票。 –

它的功能如下：当num1大于num2时，ng-show使文本奇迹般地出现，说：num2不能小于num1。 – Remko

这不是我的朋友，这是因为ng表演正在考虑作为一个字符串，而不是一个数字。你不能说那种魔法。合乎逻辑。 –

更改文本框type="text"到type="number"

<input name="num1" type="number" ng-model="num1" placeholder="num1"> 
<input name="num2" type="number" ng-model="num2" placeholder="num2"> 
<span ng-show="num1 > num2">Num2 cannot be lesser than num1</span>

Demo

来源

2017-07-04 14:05:08

您已发布Remko的相同答案，并编辑了他的帖子。不明白用一些代码再次给出相同的答案是有意义的。 –

我正试图在那个时候回答jsfiddle。这就是为什么我给Remko提供+1回答 –

你有没有读过他的描述“你的小提琴似乎可以工作，除非在num2为空时也显示信息。”请理解它的含义。我知道你可能比我更了解Angular，但是从任何一点来说，描述都不会说代码是比较字符串值而不是整数值。该行是误导性的，你已经投了票。 –

两个数字的输入字段验证

回答

相关问题