验证具有ngpattern自然输入号码 [英] validate natural input number with ngpattern

问题描述

我用 NG-模式=/ 0-9 /设置 PRICE_FIELD 不接受十进制数。但是，当我输入的自然数（从0到9999999）， NG-节目获取与激活不是有效的数字！。

在哪里我去错？请帮助。

 ＆LT;表格名称=MyForm的数据-NG-提交=创建（）＆GT;
        ＆LT;输入类型=数字
               NAME =PRICE_FIELD
               数据-NG-模式=价格
               要求
               NG-模式=/ 0-9 /
        ＆LT;跨度NG秀=$ myform.price_field error.pattern。＆GT;不能有效数字＆LT;！/ SPAN＆GT;
        ＆LT;输入类型=提交级=BTN＆GT;
＆LT; /表及GT;
 

解决方案

的问题是，你REGX模式将只匹配输入0-9。

要满足您的要求（0-9999999），你应该重写你的regx模式：

  NG-模式=/ ^ [0-9] {1,7} $ /
 

我的例子：

HTML

 ＆LT; D​​IV NG-NG应用程序控制器=formCtrl＆GT;
  ＆LT;形式NAME =myForm会NG提交=的onsubmit（）＆GT;
    ＆LT;输入类型=数字NG-模式=价格NAME =PRICE_FIELD
           NG-模式=/ ^ [0-9] {1,7} $ /要求＆GT;
    ＆LT;跨度NG秀=$ myForm.price_field error.pattern。＆GT;不是有效的数字＆LT;！/ SPAN＆GT;
    ＆LT;跨度NG-秀= GTmyForm.price_field error.required $。！;此为必填字段＆LT; / SPAN＆GT;
    ＆LT;输入类型=提交值=提交/＆GT;
  ＆LT; /表及GT;
＆LT; / DIV＆GT;
 

JS：

 函数formCtrl（$范围）{
  $ scope.onSubmit =功能（）{
    警报（形式提交了）;
  }
}
 

下面是一个的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

Hope this is helpful for you.

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