AngularJS自定义表单验证功能实例详解


Posted in Javascript onAugust 24, 2018

本文实例讲述了AngularJS自定义表单验证功能。分享给大家供大家参考,具体如下:

Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox),也实现了很多指令做为验证(required, pattern, minlength, maxlength, min, max)。

在自定义的指令中,我们可以添加我们的验证方法到ngModelController的$validators对象上。为了取得这个controller对象,我们需要requirengModel指令。

在$validators对象上的每个方法都接收modelValue和viewValue两个值做为参数。在你绑定的验证方法返回一个值(true,false)之后,Angular会在内部调用$setValidity方法。验证会在每一次输入框的值改变($setViewValue被调用)或者模型的值改变。验证发生在$parsers和$formatters成功运行之后,验证不通过的项会做为ngModelController.$error的属性存储起来。

另外,在这个controller对象上,还有一个$asyncValidators对象,如果你的验证是异步的,则需要加验证附加在这个对象上,比如说用户注册时输入手机号,我们需要在后端验证该手机号是否已经注册,这个验证方法必须return一个promise对象,然后在验证通过时调用延迟对象的resolve,失败时调用reject,还未完成的异步的验证存储在ngModelController.$pending中。

例如(注意其中的user对象,只有验证通过了,才会将值绑定到模型上):

<form name="register_form" ng-submit="save()">
    <div class="form-group">
        <label for="phoneNumber">
            手机号(不能重复):
        </label>
        <input type="text" class="form-control" ng-model="user.phoneNumber" id="phoneNumber" name="phoneNumber" required phone>
    </div>
    <div class="form-group">
        <label for="username">
            用户名(必须大于五位):
        </label>
        <input type="text" class="form-control" ng-model="user.username" id="username" required username>
    </div>
    <button class="btn btn-block btn-primary" type="submit">提交</button>
</form>
<h3>用户对象</h3>
<pre>
    {{ user | json }}
</pre>
'use strict';
angular.module('app', [])
.directive('phone', function ($q, $http) {
  return {
    require: 'ngModel',
    link: function (scope, ele, attrs, ctrl) {
      ctrl.$asyncValidators.phone = function (modelValue, viewValue) {
        var d = $q.defer();
        $http.get('phone.json')
        .success(function (phoneList) {
          if (phoneList.indexOf(parseInt(modelValue)) >= 0) {
            d.reject();
          } else {
            d.resolve();
          }
        });
        return d.promise;
      }
    }
  }
})
.directive('username', function ($q, $http) {
  return {
    require: 'ngModel',
    link: function (scope, ele, attrs, ctrl) {
      ctrl.$validators.username = function (modelValue, viewValue) {
        if (modelValue) {
          return modelValue.length > 5 ? true : false;
        };
        return false;
      }
    }
  }
})

phone.json

[
  13758262732,
  15658898520,
  13628389818,
  18976176895,
  13518077986
]

效果

AngularJS自定义表单验证功能实例详解

下面一个完整的用户注册的表单验证:

html:

<form name="register_form" novalidate>
    <div class="form-group">
        <label for="username">用户名:</label>
        <!-- ng-pattern="/PATTERN/"确保输入项符合正则 -->
        <input type="text" id="username" ng-model="user.username" class="form-control" name="username" required ng-pattern="/^[^#]*$/">
        <span class="glyphicon glyphicon-ok right" ng-show="register_form.username.$valid"></span>
    </div>
    <div class="alert alert-danger" ng-show="register_form.username.$error.pattern">
        <strong>请注意!</strong>
        用户名不能带#号。
    </div>
    <div class="alert alert-danger" ng-show="register_form.username.$error.required && register_form.username.$touched">
        <strong>请注意!</strong>
        用户名不能为空。
    </div>
    <div class="form-group">
        <label for="_password">密码:</label>
        <!-- ng-minlength="num"让密码不能小于最小长度 -->
        <input type="password" id="_password" ng-model="data._password" class="form-control" required ng-minlength="8" name="_password">
        <span class="glyphicon glyphicon-ok right" ng-show="register_form._password.$valid"></span>
    </div>
    <div class="alert alert-danger" ng-show="register_form._password.$error.minlength && register_form._password.$touched">
        <strong>请注意!</strong>
        密码长度不能少于八位。
    </div>
    <div class="alert alert-danger" ng-show="register_form._password.$error.required && register_form._password.$touched">
        <strong>请注意!</strong>
        密码不能为空。
    </div>
    <div class="form-group">
        <label for="password">确认密码:</label>
        <input type="password" id="password" ng-model="user.password" class="form-control" name="password" required pwd-repeat>
        <span class="glyphicon glyphicon-ok right" ng-show="register_form.password.$valid"></span>
    </div>
    <div class="alert alert-danger" ng-show="register_form.password.$error.pwdRepeat && register_form.password.$touched">
        <strong>请注意!</strong>
        两次输入的密码不相同。
    </div>
    <div class="alert alert-danger" ng-show="register_form.password.$error.required && register_form.password.$touched">
        <strong>请注意!</strong>
        请再次输入密码。
    </div>
    <div class="form-group">
        <label for="phone">手机号:</label>
        <div class="row">
            <div class="col-sm-10">
                <input type="num" id="phone" ng-model="user.phone" name="phone" class="form-control" required ng-minlength="11" ng-maxlength="11" phone>
            </div>
            <div class="col-sm-2">
                <button class="btn btn-default" type="button" ng-disabled="register_form.phone.$invalid">发送验证码</button>
            </div>
        </div>
        <span class="glyphicon glyphicon-ok right" ng-show="register_form.phone.$valid"></span>
    </div>
    <div class="alert alert-danger" ng-show="register_form.phone.$error.phone">
        <strong>请注意!</strong>
        该手机号已注册过,可直接登录。
    </div>
    <div class="alert alert-danger" ng-show="register_form.phone.$touched && !register_form.phone.$error.phone && (register_form.phone.$error.required || register_form.phone.$error.minlength || register_form.phone.$error.maxlength)">
        <strong>请注意!</strong>
        请输入正确的手机号。
    </div>
    <div class="form-group">
        <label for="code">验证码:</label>
        <input type="text" id="code" ng-model="user.code" class="form-control" name="code" required>
        <span class="glyphicon glyphicon-ok right" ng-show="register_form.code.$valid"></span>
    </div>
    <!-- 在表单不合法时禁用提交按钮 -->
    <button class="btn btn-block btn-primary" type="submit" ng-disabled="register_form.$invalid" ng-click="save()">提交</button>
</form>

js:

'use strict';
angular.module('app', [])
.controller('myCtrl', function ($scope) {
  $scope.data = {};
  $scope.save = function () {
    alert('保存成功!')
  }
})
// 判断手机号是否重复
.directive('phone', function ($q, $http) {
  return {
    require: 'ngModel',
    link: function (scope, ele, attrs, ctrl) {
      ctrl.$asyncValidators.phone = function (modelValue, viewValue) {
        var d = $q.defer();
        $http.get('phone.json')
        .success(function (phoneList) {
          if (phoneList.indexOf(parseInt(modelValue)) >= 0) {
            d.reject();
          } else {
            d.resolve();
          }
        });
        return d.promise;
      }
    }
  }
})
// 验证两次输入的密码是否相同的自定义验证
.directive('pwdRepeat', function () {
  return {
    require: 'ngModel',
    link: function (scope, ele, attrs, ctrl) {
      ctrl.$validators.pwdRepeat = function (modelValue) {
        // 当值为空时,通过验证,因为有required
        if (ctrl.$isEmpty(modelValue)) {
          return true;
        }
        return modelValue === scope.data._password ? true : false;
      }
    }
  }
})

css:

.form-group {
  position: relative;
}
.right {
  position: absolute;
  right: 10px;
  top: 34px;
  color: green;
}

phone.json:

[
  13758262732,
  15658898520,
  13628389818,
  18976176895,
  13518077986
]

AngularJS自定义表单验证功能实例详解

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
jquery复选框CHECKBOX全选、反选
Aug 30 Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
jQuery实现长文字部分显示代码
May 13 Javascript
angularJS 入门基础
Feb 09 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
重新理解JavaScript的六种继承方式
Mar 24 Javascript
详解VUE中v-bind的基本用法
Jul 13 Javascript
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
vue中动态select的使用方法示例
Oct 28 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
Vue源码解读之Component组件注册的实现
Aug 24 #Javascript
element-ui 关于获取select 的label值方法
Aug 24 #Javascript
微信小程序用户信息encryptedData详解
Aug 24 #Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 #Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 #Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 #Javascript
element-ui 表格数据时间格式化的方法
Aug 24 #Javascript
You might like
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
深入理解PHP内核(一)
2015/11/10 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
JS实现放烟花效果
2020/03/10 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
python数组复制拷贝的实现方法
2015/06/09 Python
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
Django-imagekit的使用详解
2020/07/06 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
酒店实习个人鉴定
2013/12/07 职场文书
环保倡议书400字
2014/05/15 职场文书
白酒营销策划方案
2014/08/17 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
2015大学生求职信范文
2015/03/20 职场文书
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis
Log4j.properties配置及其使用
2021/08/02 Java/Android