除了使用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 = "提交成功";
}
}
六.视频资料
今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~
下期不见不散~