您的位置：首页 > Web前端 > JavaScript

angular js表单验证

2016-01-20 16:53 483 查看
（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字段的是否被修改状态：
myForm.name.$dirty
4.错误信息

如果有多个验证，可以展示出是没有通过哪个验证

（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>
<3>添加依赖

var formCheckModule=angular.module('formCheckModule', ['ngMessages'])
<4>此时原来代码就可以变为如下形式

<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>
然后在验证时使用ng-messages-include="emailmessages.html"即可

（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中的值


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航