J'utilise ng-pattern="/0-9/"
pour définir price_field
n'accepte pas decimal number
. Mais lorsque je saisis un nombre naturel (de 0 à 9999999), ng-show
est activé avec Not valid number!
.
Où me suis-je trompé?. S'il vous plaît aider.
<form name="myform" data-ng-submit="create()">
<input type="number"
name="price_field"
data-ng-model="price"
require
ng-pattern="/0-9/"
<span ng-show="myform.price_field.$error.pattern">Not valid number!</span>
<input type="submit" class="btn">
</form>
Le problème est que votre modèle REGX ne correspondra qu’à l’entrée "0-9".
Pour répondre à vos besoins (0-9999999), vous devez réécrire votre modèle regx:
ng-pattern="/^[0-9]{1,7}$/"
Mon exemple:
HTML:
<div ng-app ng-controller="formCtrl">
<form name="myForm" ng-submit="onSubmit()">
<input type="number" ng-model="price" name="price_field"
ng-pattern="/^[0-9]{1,7}$/" required>
<span ng-show="myForm.price_field.$error.pattern">Not a valid number!</span>
<span ng-show="myForm.price_field.$error.required">This field is required!</span>
<input type="submit" value="submit"/>
</form>
</div>
JS:
function formCtrl($scope){
$scope.onSubmit = function(){
alert("form submitted");
}
}
Voici une démo de jsFiddle .
Cela fonctionne
<form name="myform" ng-submit="create()">
<input type="number"
name="price_field"
ng-model="price"
require
ng-pattern="/^\d{0,9}(\.\d{1,9})?$/">
<span ng-show="myform.price_field.$error.pattern">Not valid number!</span>
<input type="submit" class="btn">
</form>
Je l'ai fait pour les développeurs Vue. Mettre en évidence une façon de le faire sans regex
sideNote: Les regex sont un formidable outil puissant dont vous aurez toujours besoin.
"... Écrit des programmes pour gérer les flux de texte, car il s'agit d'une interface Universelle. "
En écrivant cela, le snipet ci-dessous.
new Vue({
el: '#app',
data: {
quantity: 0
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" >
<input
type="number"
placeholder="Quantity"
v-model.number="quantity"
> <button @click="quantity = 0" :disabled="quantity < 0 || !Number.isInteger(quantity)" >Ok</button>
<p>{{quantity}}</p>
</div>
<label>Mobile Number(*)</label>
<input id="txtMobile" ng-maxlength="10" maxlength="10" Validate-phone required name='strMobileNo' ng-model="formModel.strMobileNo" type="text" placeholder="Enter Mobile Number">
<span style="color:red" ng-show="regForm.strMobileNo.$dirty && regForm.strMobileNo.$invalid"><span ng-show="regForm.strMobileNo.$error.required">Phone is required.</span>
le code suivant aidera à la validation du numéro de téléphone et la directive respectée est
app.directive('validatePhone', function() {
var PHONE_REGEXP = /^[789]\d{9}$/;
return {
link: function(scope, Elm) {
Elm.on("keyup",function(){
var isMatchRegex = PHONE_REGEXP.test(Elm.val());
if( isMatchRegex&& Elm.hasClass('warning') || Elm.val() == ''){
Elm.removeClass('warning');
}else if(isMatchRegex == false && !Elm.hasClass('warning')){
Elm.addClass('warning');
}
});
}
}
});