使用 ngpattern 验证自然输入数 [英] validate natural input number with ngpattern

问题描述

我使用ng-pattern="/0-9/" 设置price_field 不接受十进制数.但是当我输入自然数(从 0 到 9999999)时，ng-show 被激活，Not valid number!.

我哪里出错了?.请帮忙.

<输入类型=数字"名称=价格字段"数据-ng-model =价格"要求ng-pattern="/0-9/"><span ng-show="myform.price_field.$error.pattern">无效数字！</span><input type="submit" class="btn"></表单>

解决方案

问题是你的 REGX 模式只会匹配输入0-9".

为了满足您的要求 (0-9999999)，您应该重写您的 regx 模式:

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

我的例子:

HTML:

<表单名称="myForm" ng-submit="onSubmit()"><input type="number" ng-model="price" name="price_field"ng-pattern="/^[0-9]{1,7}$/" 需要><span ng-show="myForm.price_field.$error.pattern">无效数字！</span><span ng-show="myForm.price_field.$error.required">此字段为必填项！</span><input type="submit" value="submit"/></表单>

JS:

function formCtrl($scope){$scope.onSubmit = function(){alert("表单提交");}}

这是一个 jsFiddle 演示.

I use ng-pattern="/0-9/" to set price_field do not accept decimal number. But when I input natural number (from 0 to 9999999),ng-show gets activated with Not valid number!.

Where did I go wrong?. Please help.

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

解决方案

The problem is that your REGX pattern will only match the input "0-9".

To meet your requirement (0-9999999), you should rewrite your regx pattern:

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

My example:

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

Here is a jsFiddle demo.

这篇关于使用 ngpattern 验证自然输入数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！