21271人阅读
在HTML中，用户通过input,&select,&textarea等元素进行输入，我们通常用表单来包装和管理这些控件。客户端表单验证非常重要，可以及时地为用户提供表单验证信息。但客户端表单验证只是为了增强用户体验，服务器端验证仍然是必要的。
最大的特点便是数据绑定。利用Angular在客户端脚本中构建MVC框架，Model和View之间可以实现双向绑定。因此AngularJS的表单验证可以做到实时的用户反馈。
事实上，正是因为实时的用户反馈这个神奇的特性，我们团队在&&中也继续引入了AngularJS，尽管此时我们对单页应用已经不感兴趣。
一个简单的表单
Angular是模块化的，每个APP都是一个Angular Module。我们知道Module下可以包含这样四种内容：
控制器（controllers），用来完成页面逻辑，不包含DOM操作、资源获取。服务（services），用来提供资源访问和获取，控制资源的访问，维护数据一致性。过滤器（filters），用来格式化数据显示，很多第三方插件以提供filter为主，例如angular-moment。语义标签（directives），增强的HTML标签，DOM操作都应当抽象为directive。
Angular表单其实是Angular提供的Directive，它有一个别名叫ng-form。是这个Directive实例化了一个FormController来负责表单内的页面逻辑（主要是表单验证）。
&div ng-app&
&ng-form name=someForm&
&input name=&username& type=&text& ng-model=&user.username& pattern=&^\w{6,18}$&&
&div class=&alert alert-danger& ng-show=&someForm.username.$error.pattern&&
用户名必须为6-18个字母、数字或下划线
&/ng-form&
ng-model可以把input的值双向地绑定到当前上下文的user.username变量。我们设置了用户名的pattern为6到18位。我们输入用户名时，.alert错误提示便会实时地显示或者隐藏。
这里我们指定了form的name属性，form&Directive
实例化的FormController就会以someForm命名，并插入到当前$scope。所以在模板中才能够访问userForm变量。另外，Angular的Pattern使用Javascript正则表达式语法，这里\w相当于[a-zA-Z_]。
SELECT标签
HTML中的select标签是一个单选的下拉列表，Angular对select也提供了支持（事实上，是在ngModule里面提供了一个叫select的Directive）。假如上下文中有这样的对象：
$scope.selectValue = [{value: 0, label: 'Banana'}, {value: 1, label: 'Apple'}];
$socpe.selectedValue = 1;
在模板中这样写：
&select ng-model=&selectedValue&
ng-options=&option.value as option.label for option in myOptions&&&/select&
这个&select&的便会有两个选项：Banana和Apple，且默认选中Banana。当你选择Apple时，$socpe.selectedValue会被赋值为1。option.value指定了&select&下&option&的value，而option.label指定了&option&的内容。
事实上，因为select下拉项的样式不可通过CSS控制，select在追求视觉体验的网站不常使用。Bootstrap的.dropdown就是一个更好的替代品。Angular也有类似的Dropdown插件。
多数浏览器不允许form嵌套，如果你出于自身的需求（例如：在账号表单中，头像表单需要单独提交）需要嵌套的表单，请使用ng-form标签：
&ng-form name=&outterForm&&
&ng-form name=&innerForm& ng-repeat=&file in doc.files&&
&button ng-disabled=&innerForm.$invalid&&Save Inner&/button&
&/ng-form&
&button ng-disabled=&outterForm.$invalid || innerForm.$invalid&&Save Outter&/button&
&/ng-form&
这里的outterForm下有一个动态的innerForm列表，
在innerForm下的元素$scope中是当前列表项的innerForm。因此Save
Inner的状态会根据正确地绑定到当前表单的状态。在outterForm下的Save
Outter则会同时绑定outterForm和innerForm的状态，当所有innerForm合法且outterForm合法时，按钮被激活。
至于你自己的Directive希望通过属性的方式来启用还是通过标签的方式来启用，可以在你的Directive中设置restrict字段。
在页面载入时，由于Angular的控制器仍为完成构造过程，表单会短暂地显示为原始的HTML，比如：
当然你能想到最直接的解决方案是给表单加一个隐藏的样式，在载入后去掉它。然而Angular已经提供ngCloakDirective来完成这件事情，我们只需要在表单上加一个ng-cloak：
&form ng-cloak&...&/form&
ng-cloak可以直接加在body上，但在载入过程中，整个body都会隐藏。这与HTML的渐进呈现的原则是相悖的。建议在表单上单独地应用ng-cloak。
HTML属于流式文档，已载入的部分的呈现方式总是已知的。在带宽小的情况下，HTML会逐步显示已载入的部分。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
文章：55篇
阅读：29225
(12)(6)(24)(83)
访问：143445次
积分：2519
积分：2519
排名：第12269名
原创：122篇
评论：54条1637人阅读
前端AngularJs（19）
之所以要写这篇文章，是因为要纠正《Angular 权威教程 》这本书中的关于ngMessage中的写法错误。对于ngMessages这个插件的用法其实还是比较容易的。但比较坑爹的是学习这块最开始的参照教程就是这本书，它里面的写法又是错误的。百度查找了一些国人写的文章，要么没有写到那个部分，要么也是照抄而来。谷歌不了，用bing搜了一下，老外的文章。答案有了。就是我这篇文章中要写的重点。
对了，本篇文章的中的重点是讲述ngMessages中自定义错误指令信息的部分。我们先看《权威教程》这本书的写法：
app.directive('ensureUnique', function ($http) {
& & return {
& & & & require: 'ngModel',
& & & & link: function (scope, element, attrs,
ctrl) //错误之处：ctrl应该修改为ngModel,对于我等新手又怎会明白呢
& & & & & & & &&var url = attrs.ensureU
& & & & ctrl.$parsers.push(function(val) {
//同样的错误：ctrl应该修改为ngModel
& & & & if (!val || val.length === 0) {
& & & & & &
& & & & ngModel.$setValidity('checkingAvailability', true);
& & & & ngModel.$setValidity('usernameAvailablity', false);
& & & & $http({
& & & & & & & method: 'GET',
& & & & & & & url: url,
& & & & & & & params: {
& & & & & & & username: val
& & & & & & & }
& & & & & &}).success(function() {
& & & & & ngModel.$setValidity('checkingAvailability', false);
& & & & & ngModel.$setValidity('usernameAvailablity', true);
& & & & &})['catch'](function() {
& & & & &ngModel.$setValidity('checkingAvailability', false);
& & & & &ngModel.$setValidity('usernameAvailablity', false);
& & & &});
这是脚本语言之中的错误，我们再看看html里面的错误。
&form name=&signup_form& novalidate ng-submit=&signupForm()& ng-controller=&signupController&
ensure-unique=&/api/checkUsername.json&& //这里为错误，这个指令用在了表单标签里面，应该用在对应的input元素里面
&input type=&text& placeholder=&Username& name=&username& ng-model=&signup.username&
ng-minlength=3 ng-maxlength=20 required
ensure-unique=&/api/checkUsername.json&&/&//应该用在这里才对。坑爹吧
&div class=&error& ng-messages=&signup_form.username.$error&&
&div ng-message=&required&&
Make sure you enter your username
&div ng-message=&checkingAvailability&&
Checking...
&div ng-message=&usernameAvailablity&&
The username has already been taken. Please choose another
&button type=&submit&&
还好我在学习的过程中一根筋，不解决绝不放过。查了很多资料之后，终于找到了正确的版本。下面是根据我自己的需求改写后代码：
.directive('ensureUserUnique', function (accountService) {
& & return {
& & & & require: '^ngModel',
& & & & link: function (scope, element, attrs, ngModel)
& & & & & & var setAsChecking = function (bool) {
& & & & & & & & ngModel.$setValidity('checkingAvailability', !bool);
& & & & & & };
& & & & & & var setAsUserName = function (bool) {
& & & & & & & & ngModel.$setValidity('usernameAvailability',bool);
& & & & & & };
& & & & & & ngModel.$parsers.push(function (val) {
& & & & & & & & if (!val || val.length &= 5)
& & & & & & & & {
& & & & & & & & & &
& & & & & & & & }
& & & & & & & & setAsChecking(true);
& & & & & & & & setAsUserName(false);
& & & & & & & & accountService.findUserByUserId(val).then(function (data) {
& & & & & & & & & & if (angular.isObject(data)) {
& & & & & & & & & & & & setAsChecking(false);
& & & & & & & & & & & & setAsUserName(false);
& & & & & & & & & & } else {
& & & & & & & & & & & & setAsChecking(false);
& & & & & & & & & & & & setAsUserName(true);
& & & & & & & & & & }
& & & & & & & & }, function (errordata) {
& & & & & & & & & & setAsChecking(false);
& & & & & & & & & & setAsUserName(true);
& & & & & & & & });
& & & & & & & &
& & & & & & });
html5的代码：
&&div class=&panel panel-info& ng-controller=&registUserCtrl&&
& & & & & & &div class=&panel-heading&&
& & & & & & & & &h4&
& & & & & & & & & & &span class=&glyphicon glyphicon-user&&&/span&添加用户
& & & & & & & & &/h4&
& & & & & & &/div&
& & & & & & &div class=&panel-body&&
& & & & & & & & &form name=&formRegister& class=&form-horizontal& ng-submit=&operate.addUser(formRegister.$valid)& novalidate role=&form&&
& & & & & & & & & & &div class=&form-group&&
& & & & & & & & & & & & &label for=&userId& class=&col-md-3 control-label&&用户账号&/label&
& & & & & & & & & & & & &div class=&col-md-5&&
& & & & & & & & & & & & & & &input type=&text& ng-model=&vm.userId& name=&userId& placeholder=&输入工号&
& & & & & & & & & & & & & & & & & &class=&form-control& required data-ensure-user-unique /&
& & & & & & & & & & & & & & &div class=&error-messages& ng-messages=&formRegister.userId.$error& ng-if=&formRegister.userId.$touched& ng-message-multiple&
& & & & & & & & & & & & & & & & &small ng-message=&required&&账号不能为空&/small&
& & & & & & & & & & & & & & & & &small ng-message=&checkingAvailability&&检测该用户信息...&/small&
& & & & & & & & & & & & & & & & &small ng-message=&usernameAvailability&&该用户已经注册过了&/small&
& & & & & & & & & & & & & & &/div&
& & & & & & & & & & & & &/div&
& & & & & & & & & & &/div&
& & & & & & & & & & &div class=&form-group&&
& & & & & & & & & & & & &label for=&password& class=&col-md-3 control-label&&用户密码&/label&
& & & & & & & & & & & & &div class=&col-md-5&&
& & & & & & & & & & & & & & &input type=&password& name=&password& ng-model=&vm.password& placeholder=&输入密码&
& & & & & & & & & & & & & & & & & &class=&form-control& required /&
& & & & & & & & & & & & & & &div class=&error-messages& ng-messages=&formRegister.password.$error& ng-if=&operate.showValidation&&
& & & & & & & & & & & & & & & & &small ng-message=&required&&密码不能为空&/small&
& & & & & & & & & & & & & & &/div&
& & & & & & & & & & & & &/div&
& & & & & & & & & & &/div&
& & & & & & & & & & &div class=&form-group&&
& & & & & & & & & & & & &div class=&col-md-5 col-md-offset-3&&
& & & & & & & & & & & & & & &button type=&submit& class=&btn btn-primary&&保存&/button&
& & & & & & & & & & & & & & &button type=&button& class=&btn btn-default& ng-click=&operate.cancel()&&取消&/button&
& & & & & & & & & & & & &/div&
& & & & & & & & & & &/div&
& & & & & & & & & & &div class=&form-group&&
& & & & & & & & & & & & &div class=&col-md-5 col-md-offset-3& ng-show=&operate.msgDisplay&&
& & & & & & & & & & & & & & &div ng-class=&operate.result==true ? 'alert alert-success':'alert alert-danger'&&
& & & & & & & & & & & & & & & & &span&{{operate.message}}&/span&
& & & & & & & & & & & & & & &/div&
& & & & & & & & & & & & &/div&
& & & & & & & & & & &/div&
& & & & & & & & &/form&
& & & & & & &/div&
& & & & & & &div class=&panel-footer&&&/div&
& & & & &/div&
以上才是正确的写法。填坑完毕。希望看完此文后的同学可以少走此弯路。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：166113次
积分：2802
积分：2802
排名：第10711名
原创：93篇
转载：143篇
评论：20条
(1)(3)(6)(12)(1)(6)(1)(3)(1)(3)(6)(1)(2)(5)(7)(3)(2)(3)(2)(7)(1)(7)(4)(1)(1)(6)(2)(1)(6)(4)(2)(1)(1)(2)(1)(10)(5)(6)(4)(4)(3)(5)(2)(2)(6)(7)(7)(11)(9)(1)(3)(18)(1)(2)(2)(1)(1)(4)(6)(2)(2)走进AngularJs(九)表单及表单验证
　年底了越来越懒散，AngularJs的学习落了一段时间，博客最近也没更新。惭愧~前段时间有试了一下用yeoman构建Angular项目，感觉学的差不多了想做个项目练练手，谁知遇到了一系列问题。yeoman是基于node.js的一套工具包，由于我一直在windows下，而且node.js对于windows环境的支持也在慢慢加强，所以想尝试在windows下用yeoman跟搭建一个项目。过程远比想象的坎坷多了，各种报错，各种搜资料解决问题，最终还是无法解决一些编译出错，以失败告终，转战。在此也提醒大家如果想在windows下使用yeoman，还是谨慎为好！
　　今天来学习一下一直被我忽视掉的表单验证。ng的强项是开发CRUD应用，也就是与用户操作多、交互比较频繁的应用。表单是与用户交互的一个重要角色，所以万万不能忽视。在学习之后发现这部分知识不仅仅是想象中的那么简单，比起其他特性，我们一直不怎么重视的表单验证，其实也可以做的很简单，而且易维护。下面就开始吧~
ng中的表单与Controller
　　看这个小标题也行你会差异，表单验证，怎么跟controller扯上关系了。ng中的form已经不同于我们平时用的form标签，做了增强。form是FormController的一个实例。如何理解这句话呢？想想我们使用ng-controller指令的情景：
&div ng-controller=&testC&&
& &input type=&test& ng-model=&a& /&
function testC($scope){
& //.............
　　应用了ng-controller的div就是testC的一个实例，我们可以在模板中使用定义在$scopt上的任何属性和方法，而testC的定义也是由我们自己实现的。当我们使用&form&的时候也是这样的道理，FormController由ng为我们定义好了，有一系列属性和方法提供给我们完成验证工作，form实例通过name属性来进行标识，我们可以通过此标识来访问form实例的属性和方法，如：
&form name=&myform&&
{{myform.$valid}}
　　form提供的属性都是用来表示表单的验证状态的，包括：$pristine(表单没有填写记录)、$dirty(表单有填写记录)、$valid(通过验证)、$invalid(未通过验证)、$error(验证错误信息)。除$error外，前四个的值为true或false表示相应的状态。$error的值为一个js对象，包含了以下验证内容的状态：
　　这些内容我们会在稍后的例子中看到。FormController还提供了一些方法，我们一般不手工调用它们，都是自己调用。&
　　表单元素，如input、checkbox、radio等也不是普通的表单元素了，它们通通是NgModelController的实例。与form一样，也是通过name属性来标识。FormController拥有的那五个属性，NgModelController也同样拥有，除此之外，还有许多额外的属性和方法，我们稍后也在示例中展示，可参考官方文档：&
　　还有一个特性需要了解，一个表单中的表单元素，会作为这个form的属性自动加在上面，通过name标识就可以访问到，如：
&form name=&myform&&
& &input type=&text& name=&myname& /&
& {{myform.myname.$valid}}
ng内置的验证规则&
　　ng框架提供了非常方便的验证机制，你只需要在标签上加点指令，像使用HTML5提供的验证那样，然后在css中根据规则定义好正确/错误的样式就OK了，例如我们要让一个文本框为必填项，使用required：
&form name=&myform novalidate&
& &input type=&text& ng-model=&a& required /&
　　有几点需要注意：
在&form&上加了一个novalidate，用来禁止掉默认的验证行为，因为ng已经对HTML5的几种表单新特性做了兼容处理。
表单元素必须有ng-model，否则无法触发验证
在css中分别定义.ng-pristine、.ng-valid、.ng-invalid、.ng-dirty这四种样式，ng会根据相应的状态自动加上样式。
　　这部分还是相当简单的，下面我们写例子来测一下这几种验证机制，HTML代码如下：
&div ng-app=&MyApp&&
&div ng-controller=&testC&&
& &form name=&myform& novalidate&
& & required: &input type=&text& name=&test1& ng-model=&test1& required&&br /&
& & ng-minlength(3): &input type=&text& name=&test2& ng-model=&test2& ng-minlength=&3&&&br /&
& & ng-maxlength(10): &input type=&text& name=&test3& ng-model=&test3& ng-maxlength=&10&&&br /&
& & ng-pattern(/[a-f]/): &input type=&text& name=&test4& ng-model=&test4& ng-pattern=&/[a-f]/&&&br /&
& & type=&number&(2-8): &input type=&number& name=&test5& max=&8& min=&2& ng-model=&test5&&&br /&
& & type=&url&: &input type=&url& name=&test6& ng-model=&test6&&&br /&
& & type=&email&: &input type=&email& name=&test7& ng-model=&test7&&&br /&
& & &h2&表单验证结果：&/h2&
& & myform.$invalid : {{myform.$invalid}}&br /&
& & myform.$valid : {{myform.$valid}}&br /&
& & myform.$pristine : {{myform.$pristine}}&br /&
& & myform.$dirty : {{myform.$dirty}}&br /&
& & myform.$error : {{myform.$error}}&br /&
& & &h2&表单项验证结果&/h2&
& & required:&br /&
& & myform.test1.$invalid : {{myform.test1.$invalid}}&br /&
& & myform.test1.$valid : {{myform.test1.$valid}}&br /&
& & myform.test1.$pristine : {{myform.test1.$pristine}}&br /&
& & myform.test1.$dirty : {{myform.test1.$dirty}}&br /&
& & myform.test1.$error : {{myform.test1.$error}}&br /&
& & myform.test2.$error : {{myform.test2.$error}}&br /&
　　代码，为不同的状态设置不同的背景色：
input.ng-pristine {
& & background-color:
input.ng-dirty {
& & background-color:
input.ng-valid {
& & background-color:
input.ng-invalid {
& & background-color:
　　js代码，进行controller的初始化：
var app = angular.module('MyApp',[]);
app.controller('testC',function($scope){
& $scope.test1='';
& $scope.test2='';
& $scope.test3='';
& $scope.test4='';
& $scope.test5='';
& $scope.test6='';
& $scope.test7='';
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'Angular JS 表单验证 之 提示信息的显示与隐藏
Angular JS 表单验证 之 提示信息的显示与隐藏
Angular JS 表单验证 之 提示信息的显示与隐藏 的两种方式。文章标题不能少于10个汉字~囧
好了，直奔主题。先上Demo，详情，放在 上面。Plunker 要好用很多，只是被墙，这也被墙，想不明白。
本身这个示例就很明了了。第一个 class 为 form-group 的 div，使用的是 ng-show 来控制 提示信息的显示与隐藏，我这里假设你已经明白了 AngularJS 的基本语法。再者就是很多文章对这个指令大写特写了，我也就没有必要再去详细写了。
Bootstrap includes validation styles for error, warning, and success states
on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.
ngClass支持对象表达式，所以 ng-class="{'has-success': signupForm.username.$valid, 'has-error':signupForm.username.$invalid && signupForm.username.$dirty}" 这样就轻松实现了 BootStrap 里面 has-success 样式 和 has-error 样式的转换。
第二个 class 为 form-group 的 div, 使用的是
这个指令。链接指向AngularJS 官方文档，翻不了墙的童鞋就不要点了('')
这个指令的用法初次是在 AngularJS权威教程 这本书里面看到的示例，然后自己google了一下(画外音：明明是百度好么！(╯▔皿▔)╯)
&div class="help-block" ng-messages="signupForm.password.$dirty && signupForm.password.$error"&
&div ng-message="required"&魂淡！密码不能为空！&/div&
&div ng-message="minlength"&魂淡！密码不能少于6个字符&/div&
&div ng-message="maxlength"&魂淡~密码需要那么长么~！&/div&
ngMessages 这个指令需要引入文件名为 angular-messages 的JS文件，并且需要注入到我们的ngApp模块中。 可以使用 如上所示 的 Attribute 写法，当然也支持 Element 的写法 //即 &ng-messages&&/ng-messages&
ngMessages is a directive that is designed to show and hide messages based on the state of a key/value object that it listens on. The directive itself complements error message reporting with the ngModel $error object (which stores a key/value state of validation errors).
这是摘自AngularJS ngMessages指令官方原文档的一句话，意即 ngMessages 这个指令是用来控制所监听的对象的（我们所设定的）提示信息的展示与隐藏。
我比较推崇ngMessages这个指令来控制错误信息，显而易见的好处就是代码的可读性更高，也更为简洁。
本文原创发布于慕课网 ，转载请注明出处，谢谢合作！
相关标签：
分享即可 +1积分
请登录后，发表评论
评论（Enter+Ctrl）
评论加载中...
评论加载中...
作者的热门手记
Copyright (C)
All Rights Reserved | 京ICP备 号-2