兩個數字的輸入字段驗證

我似乎被我在輸入字段中傳遞的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，但是從任何一點來說，描述都不會說代碼是比較字符串值而不是整數值。該行是誤導性的，你已經投了票。 –

兩個數字的輸入字段驗證

回答

相關問題