使用ngpatternvalidation自然input数字
我用ng-pattern="/0-9/"
设置price_field
不接受decimal number
。 但是当我input自然数(从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>
问题是你的REGX模式只能匹配input“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演示 。
这是工作
<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>
<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>
下面的代码将有助于电话号码validation和受尊重的指令是
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'); } }); } } });