Angular表单中的input验证

input验证

用angualr的时候input输入框里面的内容不符合要求的时候，input框变红或者别的颜色，先来一段代码

<div ng-app="uapp" ng-controller="uCtrl">
    <form ng-submit="submitForm()" name="checkForm" ng-init="isEmpty=false;">
      <div class="form_item  form_item_account">
        <label for=""> 请输入1-99的数字label>
        <input type="text" class="form_account" placeholder="请输入1-99的数字" ng-model="account" ng-pattern="/^([1-9]\d|[1-9])$/g">
      div>
      <div class="form_item">
        <button class="btn_register" ng-disabled="checkForm.$invalid">提交button>      
      div>
    form>
div>

上面是HTML代码块，很简单不解释，下面是js代码块

var app = angular.module('uapp',[])
.controller('uCtrl',function($scope,$http){
    $scope.submitForm = function() {
        console.log("it works!");
    };
})

对应上面HTML的代码，提交的时候在控制台输出内容。再来一段css代码

input.ng-invalid {
    border: 1px solid red;
}
input.ng-valid {
    border: 1px solid green;
}

现在整体说一下，css代码表明input输入框在class为==ng-invalid==的时候，修改边框的样式颜色等，整个DEMO的表现是，在input输入内容，里面的内容必须为1-99的数字，如果不符合要求的话，提交按钮禁用变灰，input输入框变为空色，当输入的符合要求的时候，提交按钮可用，input框为正常颜色