使用 ngpattern 验证自然输入数答案

【问题标题】：validate natural input number with ngpattern使用 ngpattern 验证自然输入数
【发布时间】：2013-11-18 14:30:15
【问题描述】：

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

【问题讨论】：

标签： angularjs regex angularjs-validation

【解决方案1】：

问题是您的 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。

【讨论】：

根据文档 (docs.angularjs.org/api/ng/directive/input)，你也可以写成：ng-pattern="[0-9]{1,7}"，更简洁一点（和 Angular我认为已经使 HTML 够脏了）。
将 input type="number" 更改为 text，现在 chrome 验证在 ng 之前就开始了，你看不到它的实际效果
@iamserious 您也可以使用 HTML5 的 novalidate 属性取消 Chrome 验证：<form novalidate>，然后您可以/必须使用 Angular 进行所有验证检查。
jsFiddle允许用户输入并提交“+13”，所以它不起作用。这是为什么？我也可以输入“+14e1” - 模式不应该不允许吗？我知道 javascript 认为这是一个数字，但我不应该输入它。

【解决方案2】：

这是有效的

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

【讨论】：

【解决方案3】：

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

【讨论】：