web-dev-qa-db-ja.com

ngpatternを使用して自然な入力数を検証する

ng-pattern="/0-9/"を使用して、price_fieldがdecimal numberを受け入れないように設定します。しかし、自然数（0〜9999999）を入力すると、ng-showがNot valid number!でアクティブになります。

どこで私は間違えましたか？。助けてください。

<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>
angularjsregexangularjs-validation
52
user2888686

問題は、REGXパターンが入力 "0-9"にのみ一致することです。

要件（0〜9999999）を満たすには、regxパターンを書き換える必要があります。

ng-pattern="/^[0-9]{1,7}$/"

私の例：

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");
  }
}

jsFiddle demo です。

120
Chickenrice

これは動作しています

<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>
10
Nishchit Dhanani

Vue開発者向けに作成しました。正規表現なしでそれを行う方法を強調するには

sideNote：Regexは、常に必要な強力なツールです。

"... テキストストリームを処理するプログラムを作成します。これはユニバーサルインターフェイスであるためです。 "

それを書いて、下のスニペット。

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>
0
Yoarthur
<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>

次のコードは電話番号の検証に役立ち、尊重されるディレクティブは

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');
            }
      });
    }
  }
});
0
Rajesh