AngularJs轻松搞定表单验证-CSDN博客

　　表单验证在很多地方都会用到，在学习angular之前，我觉得表单验证是一个很麻烦的事情，需要在js中写大量的代码，但是在angular中，只需要写很少的代码就能完成以前需要很多代码才能完成的东西。

　　在angular中，当我们在input标签中加入ng-model之后，angular会为这个标签自动生成一系列的class。例如：

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/angular.min.js"></script>
    <script>
        angular.module("myApp",[]).controller("confirmation",function($scope){
        });
    </script>
</head>
<body>
    <form ng-controller="confirmation">
        <input type="text" ng-model="username" />
    </form>
</body>
</html>

然后在页面加载完成时，我们来审查元素

可以很明显的看到这个标签多了两个类名：ng-pristine,ng-valid。

那么这两个类名有什么用呢，第一个ng-pristine是用来监听这个标签是否是原始的标签，意思就是，这个输入框还没有输入过值，当输入任意值后这个类名就会变成ng-dirty，然后，我们验证表单用到的其实是第二个：ng-valid这个是angular提供的用于表单验证的类名,ng-valid表示通过验证，ng-invalid表示不通过。我们先来看看下面的一段代码，还是刚刚那段，只是在input中加上了验证条件：

<form ng-controller="confirmation">
    <input type="text" ng-model="username" required ng-pattern="/^\w{6,20}$/"/>
</form>

其中required是html5提供的表示输入框不能为空，ng-pattern是用来写正则表达式的，然后我们再来看看审查元素的结果

可以看见类名又多了两个ng-invalid-required和ng-valid-pattern。

相信都清楚了这两个类名的作用了吧，一个用来验证输入框的required验证，一个用于表单中正则表达式的验证。

其中ng-valid-?和ng-invalid-?分别表示通过?处的验证和不通过，然后ng-valid表示通过这个输入框的所有验证，ng-invalid表示没有全部通过。

知道这些之后，表单验证就显得很简单了，比如我们想在验证通过时在输入框后面给用户一个提示就可以这样写：

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/angular.min.js"></script>
    <script>
        angular.module("myApp",[]).controller("confirmation",function($scope){
        });
    </script>
    <style>
        span{
            display: none;
        }
        .ng-valid+span{
            display: inline;
            color: green;
        }
    </style>
</head>
<body>
    <form ng-controller="confirmation">
        <input type="text" ng-model="username" required ng-pattern="/^\w{6,20}$/"/>
        <span>验证通过</span>
    </form>
</body>
</html>