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

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

ng-blur

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

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

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

< 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> 元素都支持该指令。

一般网上只给出每个方法的单独的使用方法,比较简单,但在实际的表单验证的过程中,

需要将不同的方法结合起来,通过变量值来判断如何将表单验证结果呈现出来,而controller中

一般设置好判断函数,跟具体的情况来改变量的值。

ng-blur/ng-change/ng-focus的用法是类似的,都是当某个事件触发时,可以进行变量值变化或启用函数

ng-disabled和ng-hide用法是类似的,都是可以改变页面呈现的效果,而效果则取决于

某个变量值

这两类方法需要通过变量配合起来使用,变量通过controller来进行控制


ng-change Demo

请输入昵称:{{ vm.tip1 }}

ng-focus Demo

请修改密码:{{ vm.tip2 }}

ng-blur Demo

请再次输入密码:{{ vm.tip3 }}

ng-disabled Demo

提交注册{{ vm.tip4 }}

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 = "提交成功";

}

}

六.视频资料


angular指令ng-blur等是如何运用到表单验证中的?_腾讯视频


今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~

下期不见不散~

你可能感兴趣的:(angular.js常用指令ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的?)