构建一个ng表单
1.确保form上标签有一个name属性，像下面的例子一样。最好再加一个novalidate=”novalidate”
2.form中不能有action属性。提交交由ng-submit处理
3.每个input一定要有ng-model，最好有一个name方便引用。然后用require或者ng-minlength之类才起作用
<form name="form" novalidate="novalidate">
<label name="email">Your email</label>
<input type="email" name="email" ng-model="email" placeholder="Email Address" />
</form>
ng默认提供了验证
验证是否已输入文字，只需在标签上加上required：
<inputtype="text"ng-model="user.name"required/>
验证至少输入{number}个字符，使用指令ng-minlength=“{number}”：
<input type="text" ng-model="user.name" ng-minlength="5" />
验证至多输入{number}个字符，使用指令ng-maxlength=“{number}”：
<inputtype="text"ng-model="user.name"ng-maxlength="20"/>
确保输入匹配一个正则表达式，使用指令ng-pattern="/PATTERN/":
<input type="text" ng-model="user.name" ng-pattern="/a-zA-Z/" />
验证输入是一个Email，设置input的type属性为email：
<inputtype="email"name="email"ng-model="user.email"/>
验证输入是一个数字，设置input的type属性为number：
<input type="number" name="number" ng-model="user.age" />
验证输入是一个URL，设置input的type属性为url
<inputtype="url"name="homepage"ng-model="user.weburl"/>
实战一个例子（需要验证一个email为发须并且最小为10，最长为20，并且并须要含有m字符。没有实际意义，只是演示例子）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form name="form" novalidate="novalidate">
<input type="email" ng-model="user.email" ng-minlength="5" ng-maxlength="20" ng-pattern="/m.*/" required/>
<input type="submit" value="确定"/>
</form>
<script src="http://cdn.staticfile.org/angular.js/1.3.0-beta.8/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
</script>
</body>
</html>
运行这个例子先啥都不做，查看元素
注意看这些标出来的东西有点意思。然后输入字符就能看到他们的进行变化。然后我来解释一下这些东西。（可以看到一开始required就为ng-invalid-required。但其他的都为valid）
验证的时候感觉好像出现一个bug.具体如下：（如有知道的请帮助一下解释一下这个问题）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctypehtml>
<htmlng-app="myApp">
<head>
<metacharset="UTF-8">
<title>表单</title>
</head>
<body>
<formname="form"novalidate="novalidate">
<inputtype="email"ng-model="user.email"ng-minlength="5"ng-maxlength="20"ng-pattern="/m.*/"required/>
<inputtype="email"ng-model="user.email2" required/>
<inputtype="submit"value="确定"/>
</form>
<scriptsrc="http://cdn.staticfile.org/angular.js/1.3.0-beta.8/angular.min.js"></script>
<script>
varmyApp=angular.module('myApp',[]);
</script>
</body>
</html>
第一个例子的email居然ng-valid-email。感觉有点问题。难道是用了type=”email”之类就不能用ng-minlength ng-pattern之类了吗？觉得可能是ng版本问题，但换了低版本之后发现同样有问题。希望有人能解释一下这个问题。github有这个问题 https://github.com/angular/angular.js/issues/7849 而且email验证的时候github上有人提出了其他问题，https://github.com/angular/angular.js/issues/5899，看来对于type=”email”和 url之类要使用的时候多注意，我的建议是尽量不用。如果需要请写自定义验证。下面我会介绍，确实是有够蛋疼之处。由于这种问题，所以我写的表单不会出现type=”email” type=”url” type=”number”之类，如果ng解决了这个问题。我再进行更新。
表单的状态
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form name="form">
<input type="text" name="name" ng-model="user.name" required ng-minlength="5" ng-maxlength="20"/>
<input type="text" name="email" ng-model="user.email" required
ng-pattern="/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/"/>
</form>
{{ a }}
<script src="http://cdn.staticfile.org/angular.js/1.3.0-beta.8/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
</script>
</body>
</html>
我们把焦点只聚积到表单（class有如下属性ng-pristine ng-invalid ng-invalid-required）,如果变动在第一个输入框中输入s,现在class就变了ng-invalid ng-invalid-required ng-dirty ng-invalid-minlength
现在需要解释一些东西了
AngularJS将DOM验证的结果保存在$scope对象中。这使我们能够实时做出一些处理。提供给我们的属性有：
$pristine表示用户是否修改了表单。如果为ture，表示没有修改过：
$dirty当且用户是否已经修改过表单：
我们来直观的看下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!doctypehtml>
<htmlng-app="myApp">
<head>
<metacharset="UTF-8">
<title>表单</title>
</head>
<body>
<divng-controller="testController">
<formname="form">
<inputtype="text"name="name"ng-model="user.name"requiredng-minlength="5"ng-maxlength="20"/>
<inputtype="text"name="email"ng-model="user.email"required
ng-pattern="/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/"/>
</form>
<buttonng-click="getFormStatus()">查看表单状态</button>
</div>
<scriptsrc="http://cdn.staticfile.org/angular.js/1.3.0-beta.8/angular.min.js"></script>
<script>
varmyApp=angular.module('myApp',[]);
myApp.controller('testController',function($scope){
$scope.getFormStatus=function(){
console.log($scope.form);
}
})
</script>
</body>
</html>
如果表单进行变动的时候，可以看到表单的一些属性进行了实时的变化。观察上面四个，你不难发现。$dirty和$valid是相反的，一个true，一个false或者一个false一个true,同样$valid，是得到现在是否通过验证的和$invalid也是相反的。
表单的部分说的差不多了，然后说表单中的每项的东西
可以看到每个表单项也有跟表单有些共同的属性，注意一下$error对象，记录了是哪个出现错误正确的。
实战简单实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!doctypehtml>
<htmlng-app="myApp">
<head>
<metacharset="UTF-8">
<title>表单</title>
<style>
/*在修改的表单项上才显示错误信息*/
input.ng-dirty.ng-invalid{
border:1pxsolidred;
}
</style>
</head>
<body>
<divng-controller="testController">
<formname="form"ng-submit="save()"novalidate="novalidate">
<inputtype="text"name="name"ng-model="user.name"requiredng-minlength="5"ng-maxlength="20"/>
<spanclass="error"ng-show="form.$dirty && form.name.$invalid">填写不正确</span>
<br/>
<inputtype="text"name="email"ng-model="user.email"required
ng-pattern="/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/"/>
<spanclass="error"ng-show="form.$dirty && form.name.$invalid">填写格式错误</span>
<br/>
<inputtype="submit"value="提交"/>
</form>
</div>
<scriptsrc="http://cdn.staticfile.org/angular.js/1.3.0-beta.8/angular.min.js"></script>
<script>
varmyApp=angular.module('myApp',[]);
myApp.controller('testController',function($scope){
$scope.save=function(){
//获取到表单是否验证通过
if($scope.form.$valid){
alert('通过验证可以提交表单');
}else{
alert('表单没有通过验证');
}
}
})
</script>
</body>
</html>
显示效果如图，当然有人有疑问了，比如第一个表单项，我不想提示填写不正确这么模糊的说法，而是告诉他是不是因为他没有填写，或者是因为他字符不够，或者是因为你超过了最大字符。这也非常好办，还记的$error吗？可以通过form.name.$error.minlength之类的得到啊。明白了不。还是不明白，好吧，再给逗逼做个代码实例
也许你稍为有些思路了。但还是很多时候力不从心，比如哥想自定义验证或者通过后台验证unique呢？再比如他这个一边输入一边就提示效果太他妈差了。我想在提交时提示或者我想在鼠标不在这个焦点的时候再提示。OK，也许你还有很多想法，但上篇已经结束了，容我整理思路，带来表单验证中篇。
0 0
