发表于: 2017-07-02 22:39:28

1 781


今天完成的事情:

【JS-10】angular.js常用指令ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的?

深圳分院小课堂第159期

分享人:覃腾波

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

除了使用ng-message进行表单验证外,我们还可以用angular哪些指令进行验证呢?

2.知识剖析

ng-blur

        ng-blur 指令用于告诉 AngularJS HTML 元素在失去焦点时需要执行的表达式。

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

        语法:< element ng-blur="expression"></ element >

        < a >, < input >, < select >, < textarea >,窗口对象支持。

ng-change

        ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。

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

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

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

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

        语法:< element ng-change="expression">< /element>

        < input>, < select>, 和  < textarea> 元素支持。

 ng-focus

        ng-focus 指令用于告诉 AngularJS 在 HTML 元素获取焦点时需要执行的操作。

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

        语法:< element ng-focus="expression">< /element>

        < a>, < input>, < select>, < textarea>, 和 window 对象都支持该指令。

ng-disabled 

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

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

        语法:< input ng-disabled="expression">< /input>

        < input>, < select>, 和 < textarea> 元素都支持该指令。

DEMO:

<body ng-controller="demo as vm">

<div class="abc">

<p>ng-change Demo</p>

<form>

<label>请输入昵称:<input type="text" ng-model="vm.name" ng-change="vm.fn1()"><span class="marlef">{{ vm.tip1 }}</span></label>

<p>ng-focus Demo</p>

<label>请修改密码:<input type="password" ng-model="vm.pwd" ng-focus="vm.fn2()" ng-blur="vm.fa()"><span class="marlef">{{ vm.tip2 }}</span></label>

<p>ng-blur Demo</p>

<label>请再次输入密码:<input type="password" ng-model="vm.pwd1" ng-blur="vm.fn3()"><span class="marlef">{{ vm.tip3 }}</span></label>

</form>

<p>ng-disabled Demo</p>

<button type="button" class="button" ng-disabled="vm.name == undefined || vm.pwd == undefined || vm.pwd1 == undefined || vm.pwd !== vm.pwd1" ng-click="vm.sub()">提交注册</button>

<span class="green">{{ vm.tip4 }}</span>

</div>

<script>

var myApp = angular.module("app", []);

myApp.controller("demo", demo);

function demo() {

var vm = this;

vm.fn1 = function() {

if(vm.name !== undefined && vm.name.length < 3) {

vm.tip1 = "昵称长度至少为3";

}

else if(vm.name !== undefined && vm.name.length > 10) {

vm.tip1 = "昵称长度最大为10";

}

else if(vm.name == undefined) {

vm.tip1 = "昵称不允许为空";

}

else {

vm.tip1 = "";

}

}

vm.pwd = 123456;

vm.fn2 = function() {

vm.tip2 = "请输入较复杂的字母和数字组合";

}

vm.fa = function() {

vm.tip2 = "";

}

vm.fn3 = function() {

if(vm.pwd1 !== vm.pwd) {

vm.tip3 = "两次输入的密码不一致";

}

else {

vm.tip3 = "";

}

}

vm.sub = function() {

vm.tip4 = "提交成功";

}

}

</script>

明天计划的事情:

首页模块的编写

遇到的问题:

暂无

收获:

ng-blur、ng-focus、ng-change、ng-disabled的用法


返回列表 返回列表
评论

    分享到