（1）内置验证指令
1.必填验证
直接添加required即可
<input type="text" required /> 2.长度验证
使用ng-minlength和ng-maxlength进行验证
<input type="text" ng-minlength="5" ng-maxlength="20"/> 3.自定义正则验证
使用ng-pattern="/PATTERN/"进行验证
<input type="text" ng-pattern="/[a-zA-Z]/" /> 4.数字验证
用来判断输入的数据是否是数字，与前面不同，更改input类型来实现
<input type="number" name="age" ng-model="user.age" /> 5.邮箱验证
验证输入内容是否是合法的电子邮箱类型
<input type="email" name="email" ng-model="user.email" /> 6.URL验证
验证输入的内容是否是url
<input type="url" name="homepage" ng-model="user.facebook_url" />
（2）表单数据状态
1.$dirty
表示数据被就改过
2.$valid
表示数据通过验证
3.使用
formName.inputFieldName.状态名称myForm.name.$dirty如果有多个验证，可以展示出是没有通过哪个验证
（3）表单状态
1.$valid
表示整个表单都验证通过
2.实例
<!DOCTYPE html>
<html ng-app="formCheckModule">
<head>
<meta charset="utf-8">
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script>
</head>
<body>
<div ng-controller='SomeController'>
<div class="col-md-6">
<form role="form" name="myForm" ng-submit="submitForm(myForm.$valid)" class="form-horizontal" novalidate>
<div class="form-group has-feedback">
<div class="col-md-4">
<label for="name" >1.必填项</label>
</div>
<div class="col-md-8">
<input class="form-control" id="name" name="name" type="text" required ng-model='user.name' />
<span class="glyphicon glyphicon-ok form-control-feedback"
ng-show="myForm.name.$dirty && myForm.name.$valid"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="col-md-4">
<label for="minlength">2.最小长度=5</label>
</div>
<div class="col-md-8">
<input type="text" id="minlength" name="minlength" ng-minlength="5" ng-model="user.minlength" class="form-control" />
<span class="glyphicon glyphicon-ok form-control-feedback"
ng-show="myForm.minlength.$dirty && myForm.minlength.$valid"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="col-md-4">
<label for="maxlength">3.最大长度=20</label>
</div>
<div class="col-md-8">
<input type="text" id="maxlength" name="maxlength" ng-model="user.maxlength" ng-maxlength="20" class="form-control" />
<span class="glyphicon glyphicon-ok form-control-feedback"
ng-show="myForm.maxlength.$dirty && myForm.maxlength.$valid"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="col-md-4">
<label for="pattern">4. 模式匹配</label>
</div>
<div class="col-md-8">
<input type="text" id="pattern" name="pattern" ng-model="user.pattern" ng-pattern="/^[a-zA-Z]*\d$/" class="form-control" />
<span class="glyphicon glyphicon-ok form-control-feedback"
ng-show="myForm.pattern.$dirty && myForm.pattern.$valid"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="col-md-4">
<label for="email">5. 电子邮件</label>
</div>
<div class="col-md-8">
<input type="email" id="email" name="email" ng-model="user.email" class="form-control" />
<span class="glyphicon glyphicon-ok form-control-feedback"
ng-show="myForm.email.$dirty && myForm.email.$valid"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="col-md-4">
<label for="age">6. 数字</label>
</div>
<div class="col-md-8">
<input type="number" id="age" name="age" ng-model="user.age" class="form-control" />
<span class="glyphicon glyphicon-ok form-control-feedback"
ng-show="myForm.age.$dirty && myForm.age.$valid"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="col-md-4">
<label for="url"> 7. URL</label>
</div>
<div class="col-md-8">
<input type="url" id="url" name="url" ng-model="user.url" class="form-control" />
<span class="glyphicon glyphicon-ok form-control-feedback"
ng-show="myForm.url.$dirty && myForm.url.$valid"></span>
</div>
</div>
<div class="form-group text-center">
<input class="btn btn-primary btn-lg" ng-disabled="myForm.$invalid" type="submit" value="提交" />
</div>
</form>
</div>
</div>
<script type="text/javascript">
var formCheckModule=angular.module('formCheckModule', [])
formCheckModule.controller('SomeController',function($scope) {
});
</script>
</body>
</html>
（4）多种验证并存
1.原始方法
假如一个表单字段有多种验证，比如1.不能为空，2.最小长度为2 ，3.最大长度为5
像这种要针对不同情况展示不同的错误提示，只能如下写法
<form name="userForm">
<input
type="text"
name="username"
ng-model="user.username"
ng-minlength="3"
ng-maxlength="8"
required>
<p ng-show="userForm.username.$error.minlength">Username is too short.</p>
<p ng-show="userForm.username.$error.maxlength">Username is too long.</p>
<p ng-show="userForm.username.$error.required">Your username is required.</p>
</form>2.使用angular-messages.js
<1>使用npm install angular-messages 安装angular-messages
<2>添加js
<script src="../lib/angular-messages.min.js"></script> var formCheckModule=angular.module('formCheckModule', ['ngMessages'])<form name="userForm" novalidate >
<div class="form-group" ng-class="{'has-error':userForm.name.$touched && userForm.name.$invalid}">
<label>用户名</label>
<input type="text" name="name" class="form-control"
ng-model="main.name"
ng-minlength="5"
ng-maxlength="10" required/>
<div ng-messages="userForm.name.$error" ng-if="userForm.name.$touched">
<p ng-message="minlength">用户名最小长度5</p>
<p ng-message="maxlength">用户名最大长度10</p>
<p ng-message="required">用户名必填</p>
</div>
</div>
<div class="form-group" ng-class="{'has-error':userForm.email.$touched && userForm.email.$invalid}">
<label>邮箱</label>
<input type="email" name="email" class="form-control"
ng-model="main.email"
ng-minlength="5"
ng-maxlength="20" required/>
<div ng-messages="userForm.email.$error" ng-if="userForm.email.$touched">
<div ng-messages-include="emailmessages.html"></div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-danger">提交</button>
</div>
<pre>{{userForm.name.$error}}</pre>
<pre>{{userForm.email.$error}}</pre>
</form><5>重复提示复用ng-messages-include
项目中可能有多个地方需要邮箱验证，如果每个地方都写一遍验证信息就显得非常麻烦，所以可以将错误提示信息写在一个地方，然后引用进来即可，如下emailmessages.html
<p ng-message="required">邮箱必填</p>
<p ng-message="minlength">邮箱长度太短</p>
<p ng-message="maxlength">邮箱长度太长</p>
<p ng-message="email">邮箱无效</p>（5）自定义指令验证
<!DOCTYPE html>
<html ng-app="formCheckModule">
<head>
<meta charset="utf-8">
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script>
<script src="../lib/angular-messages.min.js"></script>
</head>
<body ng-controller='SomeController'>
<form name="userForm" novalidate >
<div class="form-group" ng-class="{'has-error':userForm.own.$touched && userForm.own.$invalid}">
<label>自定义</label>
<input type="text" name="own" class="form-control"
ng-model="main.own"
ng-maxlength="20" required
own />
<div ng-messages="userForm.own.$error" ng-if="userForm.own.$touched">
<p ng-message="isAdmin">测试不通过</p>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-danger">提交</button>
</div>
<pre>{{userForm.own.$error}}</pre>
</form>
<script type="text/javascript">
var formCheckModule=angular.module('formCheckModule', ['ngMessages']);
formCheckModule.controller('SomeController',function($scope) {
});
formCheckModule.directive("own",function(){
return {
require:'ngModel',
link:function(scope, element, attrs, modelController){
var customValidator = function (value) {
console.log(value);
var validity = ('test'==(value));
modelController.$setValidity("own", validity);
return validity ? value : undefined;
};
modelController.$formatters.push(customValidator);
modelController.$parsers.push(customValidator);
}
}
});
</script>
</body>
</html>
<pre code_snippet_id="1560066" snippet_file_name="blog_20160120_9_7030877" name="code" class="html" style="font-size: 13.3333px;"> 注意：1）函数中value就是表单中的数据 2）每次表单中数据修改都会进入
3）$setValidity就是设置$error中的值
扫一扫
9239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
