【修真院web小课堂】angular js常用指令 ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的？

本文链接：https://blog.csdn.net/qq_42943048/article/details/82532943

大家好，我是IT修真院武汉分院web第16期的学员孟晨，一枚正直纯洁善良的web程序员
今天给大家分享一下，修真院官网js（职业）任务八，深度思考中的知识点——angular js常用指令 ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的？

1.背景介绍

AngularJS 表单是输入控件的集合，包含了HTML控件：input\select\button\textarea和HTML表单，通过使用ng-model来对数据进行绑定。通常表单验证中大多是输入验证，即对input内容的验证，使用$dierty\$valid\$invalid\$pristine属性来验证输入内容。今天则讲常用指令ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的。

2.知识剖析

ng-blur

定义用法：

当输入框失去焦点时执行表达式

ng-blur 指令不会覆盖原生的 onblur 事件，如果触发该事件，ng-blur 表达式与原生的 onblur 事件都会执行。

语法：
这里写图片描述

ng-focus

定义用法：

当输入框获取焦点时执行表达式

ng-focus 指令不会覆盖元素的原始 onfocus 事件, 事件触发时，ng-focus 表达式与原始的 onfocus 事件将都会执行。

语法：

这里写图片描述

ng-change

定义用法：

当输入框的值改变时执行函数

ng-change 指令需要搭配 ng-model 指令使用。

ng-change指令不会覆盖原生的 onchange 事件, 如果触发该事件，ng-change 表达式与原生的 onchange 事件都会执行。

ng-change 事件在值的每次改变时触发，它不需要等待一个完成的修改过程，或等待失去焦点的动作。

ng-change 事件只针对输入框值的真实修改，而不是通过 JavaScript 来修改。

语法：

这里写图片描述

ng-disabled

定义用法：

禁用或启用输入框

ng-disabled 指令设置表单输入字段的 disabled 属性(input, select, 或 textarea)。

如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用。

语法：

这里写图片描述

3.常见问题

常用指令ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的？

4.解决方案

ng-blur输入框失去焦点时执行函数，一般用在表单中的注册功能，如用户名重名提示信息显示。

ng-focus输入框获取焦点时执行表达式。可用在显示提醒事项。

ng-change 则可用于需要随时验证的表单数据，如设置密码输入两次的时候。

ng-disable 可用于表单输入不合法时，提交按钮则不可按的状态

5.编码实战

html的结构

 <form name="f" ng-controller='c'>
        <input name="input" ng-model="h" ng-change="j()" ng-blur="d()" ng-focus="b()" autocomplete="off">
        <div>
            <p ng-hide="v1">还没填</p>
            <p ng-hide="v2">填少了</p>
        </div>
        <button class="btn btn-default btn-lg" disabled="disabled" ng-disabled="o">点</button>
 </form>

为空时

//得到焦点就隐藏
$scope.b = function () {
    $scope.v1 = true;
}
//设置默认隐藏
$scope.v1 = true;
//失焦为空
$scope.d = function () {
    if ($scope.h == "") {
        $scope.v1 = false;
        } else {
        $scope.v1 = true;
     }
}

效果图
这里写图片描述

change

//得到焦点就隐藏
$scope.b = function () {
    $scope.v2 = true;
}
//设置默认隐藏
$scope.v2 = true;
//change
$scope.j = function () {
    if ($scope.h.length < 13) {
        $scope.v2 = false;
    } else {
        $scope.v2 = true;
    }
}

效果图
这里写图片描述

超级完整版

//得到焦点就隐藏
$scope.b = function () {
    $scope.v1 = true;
    $scope.v2 = true;
}
//设置默认隐藏
$scope.v1 = true;
$scope.v2 = true;
$scope.o = true;
//失焦为空
$scope.d = function () {
    if ($scope.h == "") {
        $scope.v1 = false;
        $scope.v2 = true;
        $scope.o = true;
     } else {
        $scope.v1 = true;
     }
}
//change
$scope.j = function () {
    if ($scope.h.length < 13) {
        $scope.v2 = false;
        $scope.o = true;
     } else {
        $scope.v2 = true;
        $scope.o = false;
     }
}