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的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
详解JS 比较两个Json对象的值是否相等的实例
Nov 20 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
javascript关于继承解析
May 10 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
js中url对象化管理分析
Dec 29 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
jquery实现购物车基本功能
Oct 25 jQuery
vue 使用外部JS与调用原生API操作示例
Dec 02 Javascript
VSCode launch.json配置详细教程
Jun 18 Javascript
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 正则表达式的学习探讨
2013/06/06 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
Array.prototype 的泛型应用分析
2010/04/30 Javascript
aspx中利用js实现确认删除代码
2010/07/22 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
JavaScript如何操作css
2020/10/24 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Django中间件实现拦截器的方法
2018/06/01 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
利用Python实现kNN算法的代码
2019/08/16 Python
python tornado修改log输出方式
2019/11/18 Python
Python Django搭建网站流程图解
2020/06/13 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
致400米运动员广播稿
2014/02/07 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python
MySQL优化及索引解析
2022/03/17 MySQL