angular js表单验证

来源：互联网发布：ipad air2卸载软件编辑：程序博客网时间：2024/04/29 17:48

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

0 0