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 双向绑定
<input ng-model="name">
<div>{{ name }}</div>
// ng-model后的name看成变量，这样后面只是调用变量；
2、ng-minlength 和 ng-maxlength指令
限制最小长度、最大长度；type="text"什么都可以输入；type="number"只能输入数字；
<input class="form-control"
ng-model="name"
type="text"
ng-minlength="4"
ng-maxlength="10">
<div>{{ name }}</div>
3、ng-submit 和 ng-class 这个没序号；
ng-submit 提交表单 ng-class 标签动态添加class属性；
// index.html
// ng-class, 参数无效，已经touch过了，会添加error的class；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="lib/bootstrap.min.css">
<style>
.error
{
border: 1px solid #a10;
}
</style>
</head>
<body ng-app="myApp" ng-controller="Maincontroller">
<form name="signUpForm" ng-submit="submitForm()">
<div class="form-group">
<label>用户名:</label>
<input name="username"
ng-model="username"
ng-class="{ 'error': signUpForm.username.$invalid &&
signUpForm.username.$touched}"
ng-minlength="4"
required
class="form-control">
</div>
<div> {{ username }}</div>
</form>
<script src="lib/angular.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
// main.js
angular.module('myApp', [])
.controller('MainController', function($scope)
{
$scope.submitForm = function(){
console.log('表单提交了!')
}
})
4、ng-if 用于条件判断；
<body ng-app="myApp" ng-controller="MainController">
<form name="signUpForm" ng-submit="submitForm()">
<div class="form-group">
<label>用户名:</label>
<input name="username"
ng-model="username"
ng-class="{ 'error': signUpForm.username.$invalid &&
signUpForm.username.$touched }"
ng-minlength="4"
required
class="form-control">
</div>
<div ng-if="signUpForm.username.$invalid &&
signUpForm.username.$touched"> 您的输入有误请检查 </div>
<div ng-if="signUpForm.username.$valid">
<div>
慕课网(IMOOC)是学习编程最简单的免费平台。慕课网提供了丰富的移动端开发、
php开发、web前端、html5教程以及css3视频教程等课程资源。
</div>
</div>
</form>
<script src="lib/angular.min.js"></script>
<script src="js/main.js"></script>
</body>
5、ng-disabeled
<body ng-app="myApp" ng-controller="MainController">
<form name="signUpForm" ng-submit="submitForm()">
<div class="form-group">
<label>用户名:</label>
<input name="username"
ng-model="username"
ng-class="{ 'error': signUpForm.username.$invalid &&
signUpForm.username.$touched }"
ng-minlength="4"
required
class="form-control">
<input name="username2"
class="form-control"
ng-disabled="signUpForm.username.$invalid"
ng-model="username2">
<button type="submit" class="btn btn-primary" ng-disabled="signUpForm.username.$invalid">提交</button>
</div>
</form>
<script src="lib/angular.min.js"></script>
<script src="js/main.js"></script>
</body>
6、表单建立
<!-- form 放到容器中 -->
// margin 上下30，左右auto
.wrapper
{
width:200px;
margin: 30px auto;
}
// 默认是隐藏的
p.error
{
display: none;
}
表单index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="lib/bootstrap.min.css">
<style>
.error
{
color: #a10
}
p.error
{
display: none;
}
input.error
{
border: 1px solid #a10;
}
.wrapper
{
width:200px;
margin: 30px auto;
}
</style>
</head>
<body ng-app="myApp" ng-controller="MainController">
<!-- form 放到容器中 -->
<div class="wrapper">
<form >
<h2>注册</h2>
<div class="form-group">
<label>用户名:</label>
<input name="username" type="text" class="form-control">
<p class="error">输入错误</p>
</div>
<div class="form-group">
<label>密码:</label>
<input name="password" type="password" class="form-control">
</div>
<div class="form-group">
<label>确认密码:</label>
<input name="password2" type="password" class="form-control">
</div>
<div>
<button class="btn btn-primary"> 注册 </button>
</div>
</form>
</div>
<script src="lib/angular.min.js"></script>
<script src="js/main.js"></script>
</body>
</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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="lib/bootstrap.min.css">
<style>
.error
{
color: #a10
}
p.error
{
display: none;
}
input.error
{
border: 1px solid #a10;
}
.wrapper
{
width:200px;
margin: 30px auto;
}
</style>
</head>
<body ng-app="myApp" ng-controller="SignUpController">
<!-- form 放到容器中 -->
<div class="wrapper">
<form name="signUpForm" ng-submit="submitForm()">
<h2>注册</h2>
<div class="form-group">
<label>用户名:</label>
<input name="username"
type="text"
class="form-control"
ng-model="userdata.username">
<p class="error">输入错误</p>
</div>
<div class="form-group">
<label>密码:</label>
<input name="password"
type="password"
class="form-control"
ng-model="userdata.password">
</div>
<div class="form-group">
<label>确认密码:</label>
<input name="password2"
type="password"
class="form-control"
ng-model="userdata.password2">
</div>
<div>
<button class="btn btn-primary"> 注册 </button>
</div>
</form>
</div>
<script src="lib/angular.min.js"></script>
<script src="js/main.js"></script>
</body>
</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;
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="lib/bootstrap.min.css">
<style>
.error
{
color: #a10
}
/*p.error*/
/*{*/
/*display: none;*/
/*}*/
input.error
{
border: 1px solid #a10;
}
.wrapper
{
width:200px;
margin: 30px auto;
}
</style>
</head>
<body ng-app="myApp" ng-controller="SignUpController">
<!-- form 放到容器中 -->
<div class="wrapper">
<form name="signUpForm" ng-submit="submitForm()">
<h2>注册</h2>
<div class="form-group">
<label>用户名:</label>
<!-- 打印出来检查错误! -->
<pre>合法, {{ signUpForm.username.$valid}}</pre>
<pre> {{ signUpForm.username }} </pre>
<pre> {{ userdata.username }} </pre>
<input name="username"
type="text"
class="form-control"
ng-model="userdata.username"
ng-minlength="4"
ng-maxlength="32"
required>
<p class="error" ng-if="signUpForm.username.$error.required && signUpForm.username.$touched">用户名不可为空</p>
<p class="error" ng-if="(signUpForm.username.$error.minlength ||
signUpForm.username.$error.maxlength) && signUpForm.username.$touched">用户名称长度应在4到32位之间</p>
</div>
<div class="form-group">
<label>密码:</label>
<input name="password"
type="password"
class="form-control"
ng-model="userdata.password"
ng-minlength="6"
ng-maxlength="255"
required>
<p class="error" ng-if="signUpForm.password.$error.required && signUpForm.password.$touched">密码不可为空</p>
<p class="error" ng-if="(signUpForm.password.$error.minlength ||
signUpForm.password.$error.maxlength) && signUpForm.password.$touched">密码长度应在6到255位之间</p>
</div>
<div class="form-group">
<label>确认密码:</label>
<pre>合法, {{ signUpForm.password2.$valid}}</pre>
<pre> {{ signUpForm.password2 }} </pre>
<pre> {{ userdata.password2 }} </pre>
<input name="password2"
type="password"
class="form-control"
ng-model="userdata.password2"
compare="userdata.password"
required>
<p class="error" ng-if="signUpForm.password2.$error.compare && signUpForm.password2.$touched">两次输入不一致</p>
</div>
<div>
<button class="btn btn-primary"> 注册 </button>
</div>
</form>
</div>
<script src="lib/angular.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
- 3、显示错误信息和通过信息
font-awesome 加个绿色的对号；
.input-result {
position: relative;
top: -26px;
left: 180px;
}
chrome中定位到元素，添加样式top、left；键盘方向键上下可以加减的；
