AngularJS 表单验证

 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>

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