最近，在学习angular下面就和大家分享一个简单的表单验证实例
在分享实例之前先整理一下，一些基础知识
input元素上使用的所有验证选项：
1必填项 <inputtype="text" required/>
2最小长度 <input type="text"ng-minlength="5"/>
3最大长度 <input type="text"ng-maxlength="20"/>
4模式匹配（正则表达式）<input type="text"ng-pattern="[a-zA-z]"/>
5电子邮件（type属性） <inputtype="email" name ="email"/>
6数字（type属性）<inputtype="number" name ="age"/>
7 URL （type属性）<input type="url"name ="homepage"/>
8自定义验证（比如服务端验证用户名是否被使用）
9 在表达中的控制变量
格式如下：formName.inputFieldName.property
未修改表单
formName.inputFieldName.$pristine= true;(反之为false)
修改过表单
formName.inputFieldName.$dirty= true
合法的表单
formName.inputFieldName.$valid= true
不合法的表单
formName.inputFieldName.$invalid= true
错误--验证失败
formName.inputFieldName.$error=true
有个这些基本知识后，下面给大家展示，表单验证的实例
SignUp.html
<!doctype html><html
ng-app="myApp">
<head>
<style type="text/css">
body
{
background-color: #fff;
border-top: 5px solid #3399cc;
}
html
{
background: #fff;
}
.row
{
border: 0px solid green;
}
input.ng-invalid
{
border: 1px solid red;
}
input.ng-valid
{
border: 1px solid green;
}
</style>
<script src="angular.min.js"></script>
</head>
<body>
<form
name="signup_form" novalidate ng-submit="signupForm()"
ng-controller="signupController">
<fieldset>
<legend>Signup</legend>
<div class="row">
<div class="large-12
columns">
<label>Your name</label>
<input type="text"
placeholder="Name"
name="name"
ng-model="signup.name"
ng-minlength=3
ng-maxlength=20
ng-class="{error:
signup_form.name.$dirty && signup_form.name.$invalid}"
required />
<div class="error"
ng-show="signup_form.name.$dirty &&
signup_form.name.$invalid && !signup_form.name.$focused">
<small class="error"
ng-show="signup_form.name.$error.required">
Your name is required.
</small>
<small class="error"
ng-show="signup_form.name.$error.minlength">
Your name is required to be at
least 3 characters
</small>
<small class="error"
ng-show="signup_form.name.$error.maxlength">
Your name cannot be longer than
20 characters
</small>
</div>
</div>
</div>
<div class="row">
<div class="large-12
columns">
<label>Your email</label>
<input type="email"
placeholder="Email"
name="email"
ng-model="signup.email"
ng-minlength=3 ng-maxlength=20
ng-class="{error:
signup_form.name.$dirty && signup_form.name.$invalid}"
required />
<div class="error"
ng-show="signup_form.email.$dirty &&
signup_form.email.$invalid && signup_form.submitted">
<small class="error"
ng-show="signup_form.email.$error.required">
Your email is required.
</small>
<small class="error"
ng-show="signup_form.email.$error.minlength">
Your email is required to be at
least 3 characters
</small>
<small class="error"
ng-show="signup_form.email.$error.email">
That is not a valid email.
Please input a valid email.
</small>
<small class="error"
ng-show="signup_form.email.$error.maxlength">
Your email cannot be longer
than 20 characters
</small>
</div>
</div>
</div>
<div class="large-12 columns">
<label>Username</label>
<input type="text"
placeholder="Desired
username"
name="username"
ng-model="signup.username"
ng-minlength=3
ng-maxlength=20
ng-class="{error:
signup_form.name.$dirty && signup_form.name.$invalid}"
ensure-unique="username" required />
<div class="error"
ng-show="signup_form.email.$dirty &&
signup_form.email.$invalid && signup_form.submitted">
<small class="error"
ng-show="signup_form.username.$error.required">
Please input a username
</small>
<small class="error"
ng-show="signup_form.username.$error.minlength">
Your username is required to be at least 3
characters
</small>
<small class="error"
ng-show="signup_form.username.$error.maxlength">
Your username cannot be longer
than 20 characters
</small>
<small class="error"
ng-show="signup_form.username.$error.unique">
That username is taken, please
try another
</small>
</div>
</div>
<button type="submit"
class="button radius">Submit</button>
</fieldset>
</form>
<script
src="angularScript.js"></script>
</body>
</html>
angularScript.js
angular.module('myApp', []).directive('ensureUnique',['$http', function($http) { return { require: 'ngModel', link: function(scope, ele, attrs, c) { scope.$watch(attrs.ngModel, function() { $http({ method: 'POST', url: '/api/check/' +attrs.ensureUnique, data: {'field': attrs.ensureUnique} }).success(function(data, status,headers, cfg) { c.$setValidity('unique',data.isUnique); }).error(function(data, status,headers, cfg) { c.$setValidity('unique', false); }); }); } };}]).directive('ngFocus',[function() { var FOCUS_CLASS = "ng-focused"; return { restrict: 'A', require: 'ngModel', link: function(scope, element, attrs, ctrl){ ctrl.$focused = false; element.bind('focus', function(evt) { element.addClass(FOCUS_CLASS); scope.$apply(function() {ctrl.$focused= true;}); }).bind('blur', function(evt) { element.removeClass(FOCUS_CLASS); scope.$apply(function() {ctrl.$focused= false;}); }); } }}]).controller('signupController',['$scope', function($scope) { $scope.submitted = false; $scope.signupForm = function() { if ($scope.signup_form.$valid) { // Submit as normal } else { $scope.signup_form.submitted = true; } }}]);
下面是
本文出自 “shuizhongyue” 博客，请务必保留此出处http://shuizhongyue.blog.51cto.com/7439523/1607837