如上图所示,我们需要实现如下这些验证功能:
控件都是必输控件
都需要控制最大长度
第一次打开页面,控件不能显示为错误状态
输入内容再清空后,必输控件需要显示为错误状态
只有所有输入合法后,发布按钮才能变为可用状态
通过AngularJS,我们可以很轻松的实现这些要求,只需要1行JS代码。UI样式这里采用的是Bootstrap。先上示例代码:
HTML。
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
<!DOCTYPE html> < html lang = "zh-cn" ng-app = "ftitApp" > < head > < meta charset = "utf-8" /> < title >Demo</ title > < link href = "/Content/bootstrap.css" rel = "stylesheet" /> < script src = "/Scripts/angular.js" ></ script > </ head > < body > < div class = "container body-content" > <!-- 主要内容区域 --> < div class = "row main-content" > < div class = "col-md-9" > <!-- 联系我们表单区域 --> < form action = "/Contact/Create" method = "post" role = "form" name = "createContactForm" ng-controller = "ContactCreateController" > <!-- UserName 您的称呼 --> < div class = "form-group has-feedback" ng-class = "{'has-success' : !createContactForm.UserName.$pristine && createContactForm.UserName.$valid, 'has-error' : !createContactForm.UserName.$pristine && createContactForm.UserName.$invalid }" > < label for = "UserName" >您的称呼*</ label > < input type = "text" class = "form-control" ng-model = "userName" name = "UserName" autofocus = "" required ng-maxlength = 30 > < div ng-show = "!createContactForm.UserName.$pristine && createContactForm.UserName.$valid" > < span class = "glyphicon glyphicon-ok form-control-feedback" ></ span > </ div > < div ng-show = "!createContactForm.UserName.$pristine && createContactForm.UserName.$invalid" > < span class = "glyphicon glyphicon-remove form-control-feedback" ></ span > </ div > </ div > <!-- UserMail 邮箱地址 --> < div class = "form-group has-feedback" ng-class = "{'has-success' : !createContactForm.UserMail.$pristine && createContactForm.UserMail.$valid, 'has-error' : !createContactForm.UserMail.$pristine && createContactForm.UserMail.$invalid }" > < label for = "UserMail" >邮箱地址*</ label > < input type = "email" class = "form-control" ng-model = "userMail" name = "UserMail" required ng-maxlength = 30 > < div ng-show = "!createContactForm.UserMail.$pristine && createContactForm.UserMail.$valid" > < span class = "glyphicon glyphicon-ok form-control-feedback" ></ span > </ div > < div ng-show = "!createContactForm.UserMail.$pristine && createContactForm.UserMail.$invalid" > < span class = "glyphicon glyphicon-remove form-control-feedback" ></ span > </ div > </ div > <!-- Subject 主题 --> < div class = "form-group has-feedback" ng-class = "{'has-success' : !createContactForm.Subject.$pristine && createContactForm.Subject.$valid, 'has-error' : !createContactForm.Subject.$pristine && createContactForm.Subject.$invalid }" > < label for = "Subject" >主题*</ label > < input type = "text" class = "form-control" ng-model = "subject" name = "Subject" required ng-maxlength = 100 > < div ng-show = "!createContactForm.Subject.$pristine && createContactForm.Subject.$valid" > < span class = "glyphicon glyphicon-ok form-control-feedback" ></ span > </ div > < div ng-show = "!createContactForm.Subject.$pristine && createContactForm.Subject.$invalid" > < span class = "glyphicon glyphicon-remove form-control-feedback" ></ span > </ div > </ div > <!-- Content 内容 --> < div class = "form-group has-feedback" ng-class = "{'has-success' : !createContactForm.Content.$pristine && createContactForm.Content.$valid, 'has-error' : !createContactForm.Content.$pristine && createContactForm.Content.$invalid }" > < label for = "Content" >内容*</ label > < textarea cols = "4" rows = "5" class = "form-control" ng-model = "content" name = "Content" required ng-maxlength = 1000 ></ textarea > < div ng-show = "!createContactForm.Content.$pristine && createContactForm.Content.$valid" > < span class = "glyphicon glyphicon-ok form-control-feedback" ></ span > </ div > < div ng-show = "!createContactForm.Content.$pristine && createContactForm.Content.$invalid" > < span class = "glyphicon glyphicon-remove form-control-feedback" ></ span > </ div > </ div > <!-- 提交按钮 --> < div class = "form-group" > < div ng-show = "createContactForm.$valid" > < input type = "image" src = "/Content/images/comment_publish_button.png" onsubmit = "submit();" value = "发布" ng-disabled = '!createContactForm.$valid' /> </ div > < div ng-show = "!createContactForm.$valid" > < img src = "/Content/images/invalid_publish_button.png" /> </ div > </ div > </ form > </ div > </ div > </ div > < script src = "/Scripts/ftit/ContactCreateController.js" ></ script > </ body > </ html > |
JS代码(真的只有一行哟)
ContractCreateController.js
1
|
var ftitAppModule = angular.module( 'ftitApp' , []); |
这样就好啦。几个关键的地方解释一下:
ng-class:这个标签用来控制class的值。例如ng-class="{'has-success' : !createContactForm.Content.$pristine}的意思就是,如果!createContactForm.Content.$pristine的值为true,class的值就为has-success。
ng-show:控制是否显示该控件。
createContactForm.$valid:全部验证通过后,值为true,否则为false
createContactForm.Content.$valid:标识Content控件是否通过验证,通过为true,否则为false
createContactForm.Content.$pristine:标识Content控件是否从未输入过。从未输入为true,否则为false
更细节的技术问题请查看AngularJS的技术文档。