AngularJS表单验证---慕课网视频http://www.imooc.com/learn/505
代码：https://github.com/kakukeme/angularJS-demo.git
Angularjs 指令；
- 1、理解$scope在Angular中的意义；
- 2、掌握angular基础指令；
- 3、熟练配合各组件对表单进行动态验证；
ng-model
angularjs.org
angularjs、bootstrap、jquery
angular.module('myApp', [])
[]空数组，不需要注入什么其他依赖；
Angularjs 基础指令
1、ng-model
ng-model 双向绑定
{{ name }}
// ng-model后的name看成变量，这样后面只是调用变量；
2、ng-minlength 和 ng-maxlength指令
限制最小长度、最大长度；type="text"什么都可以输入；type="number"只能输入数字；
ng-model="name"
type="text"
ng-minlength="4"
ng-maxlength="10">
{{ name }}
3、ng-submit 和 ng-class 这个没序号；
ng-submit 提交表单 ng-class 标签动态添加class属性；
// index.html
// ng-class, 参数无效，已经touch过了，会添加error的class；
4、ng-if 用于条件判断；
5、ng-disabeled
6、表单建立
// margin 上下30，左右auto
.wrapper
{
width:200px;
margin: 30px auto;
}
// 默认是隐藏的
p.error
{
display: none;
}
表单index.html
指令与表单合作验证
- 1、创建和部署controller
.controller('SignUpController', function($scope){} 创建controller
第一项controller 名称、第二项回调函数；回调函数里传个$scope进去，这个$scope作为dom环境里的域；
在$scope这个域里有个userdata，所有的表单数据最好存到这个userdata里； $scope.submitForm处理表单提交；
ng-app 和 ng-controller 写在一起，它们是平级的；
// main.js
angular.module('myApp', [])
.controller('SignUpController', function($scope)
{
// 空对象
$scope.userdata = {};
$scope.submitForm = function()
{
// 打印表单输入的内容
console.log($scope.userdata);
if($scope.signUpForm.$invalid)
alert('请检查您的信息');
else
alert('提交成功!');
}
})
// index.html
- 2、传入用户数据和创建验证规则
angular.module('myApp', [])
.controller('SignUpController', function($scope)
{
// 空对象
$scope.userdata = {};
$scope.submitForm = function()
{
// 打印表单输入的内容
console.log($scope.userdata);
if($scope.signUpForm.$invalid)
alert('请检查您的信息');
else
alert('提交成功!');
}
})
// 自己创建一条指令
.directive('compare', function()
{
var o = {}; // 对象,返回这个对象
// angular 命令是作用在元素和属性上的;
o.strict = 'AE'
o.scope = {
orgText: '=compare'
}
o.require = 'ngModel';
// 主函数 scope,元素,属性,controller
o.link = function(scope, ele, att, con)
{
// controller的$validators加一个方法compare,
// 回调函数的值v,就是用户输入的值;
con.$validators.compare = function(v)
{
// 返回,之前输入的和现在输入的是否一样
return v == scope.orgText
}
scope.$watch()
// watch orgText,一旦orgText有变化就让controller开始验证
scope.$watch('orgText', function()
{
con.$validate();
})
}
return o;
})
- 3、显示错误信息和通过信息
font-awesome 加个绿色的对号；
.input-result {
position: relative;
top: -26px;
left: 180px;
}
chrome中定位到元素，添加样式top、left；键盘方向键上下可以加减的；