AngularJS 表单验证

来源：互联网发布：微游戏机 vs 网络盒子编辑：程序博客网时间：2024/06/05 06:11

AngularJS有各种各样的表单验证，简单的有非空验证required（补充一下如果非空验证是需要条件的，则用ng-required="条件"），字符长度验证ng-minlength=5，ng-maxlength=10，Email验证。

例如非空验证，也就是必填验证：

<input type="text" required />

Email验证

<input type="email" name="email"/>

简单的正则验证

<input type="text" name="ip" required ng-pattern ="/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/">   <span class="no-null">*</span>  <div class="no-null-message" ng-messages="addRpForm.ip.$error" ng-if="addRpForm.ip.$touched">   <div ng-message="required">"IP"不能为空</div>   <div ng-show="addRpForm.ip.$dirty&&addRpForm.ip.$invalid">IP地址格式错误</div>  </div>

以上是一些AngularJS自带的表单验证，接下来说说自定义的验证怎样生效

一、单纯的验证当前输入

比如说我要验证一个输入的字符为电话号码，格式错误的话给出相应错误提示

JS中代码如下

var val=angular.module('sky-validate', [])val.directive('validatephone',Validatephone);//验证电话号Validatephone.$inject=['$timeout'];function Validatephone($timeout) {    return {        restrict: "A",        require:"ngModel",        link: function($scope, el, attr,ngModelController) {            ngModelController.$parsers.push(function(viewValue){                var pattern = /^0?1[3|4|5|8][0-9]\d{8}$/;                if(pattern.test(viewValue)){                    ngModelController.$setValidity('validatephone',true);                }else{                    ngModelController.$setValidity('validatephone',false);                }                return viewValue;            });        }    };};

html中相应代码

<input type="text"  name="contactPhone" validatephone required/><div>      <span class="no-null">*</span>      <div ng-messages="createWorkOrder.contactPhone.$error" ng-if="createWorkOrder.contactPhone.$touched">         <div ng-message="required">必填项不能为空</div>         <div ng-message="validatephone">格式不正确号</div>      </div></div>

二、要根据其他条件判断自己的输入合不合法

例如阈值合法性校验

JS代码如下

//阈值合法校验app.directive('validatethreshold',function(){    return {    restrict: "A",        require:"ngModel",        link:function($scope,ele,attrs,ngModelController){        ngModelController.$parsers.push(function(viewValue){        //当指标为　**使用率时数值范围　0-100;        //当指标为　**读/写时数值范围　0-100000000;        //当指标为　状态时数值为设备异常        var UsedString = ["cpu.used","mem.used","disk.used"];        var WRString = ["disk.read","disk.write","net.write","net.read"];        if(($scope.add_alarm && $scope.add_alarm.target != undefined && UsedString.indexOf($scope.add_alarm.target.value) != -1) ||           ($scope.update_alarm && UsedString.indexOf($scope.update_alarm.target.value) != -1)){        if(viewValue >= 0 && viewValue <=100){        ngModelController.$setValidity('validatethreshold',true);        } else {                        ngModelController.$setValidity('validatethreshold',false);                    }        } else if(($scope.add_alarm && $scope.add_alarm.target != undefined && WRString.indexOf($scope.add_alarm.target.value) != -1) ||                ($scope.update_alarm && WRString.indexOf($scope.update_alarm.target.value) != -1)){        if(viewValue >= 0 && viewValue <=100000000){        ngModelController.$setValidity('validatethreshold',true);        } else {                        ngModelController.$setValidity('validatethreshold',false);                    }        } else{                }                return viewValue;            });        }    };});

html如下

<input type="text" name="threshold"  validatethreshold ng-required="add_alarm.target.value !='state'"><div class="no-null-message" ng-messages="addAlarmForm.threshold.$error" ng-if="addAlarmForm.threshold.$touched">   <div ng-message="required">阈值不能为空</div>   <div ng-message="validatethreshold">当指标为**使用率时数值范围0-100,当指标为**读/写时数值范围0-100000000,当指标为状态时数值为设备异常</div></div>

大概就是以上这些，以后遇到其他问题，再继续补充。。。。。。

0 0