angular表单验证2

darkbug 发布于2019-08-19 17:41 / 1310人阅读

摘要：表单验证使用场景在实际的开发中我们可能会有这样的情况。姓名不能为空姓名太短姓名太长姓名不能为空姓名太短姓名太长借助表单本身比之前的更简单了。结尾以上就是关于表单验证的全部内容。

前言

在之前的文章《angular表单验证》中主要介绍了一些关于angular表单验证的基础知识。在此篇中将着重以扩展angular表单验证的相关内容和实际开发中的应用为主。

表单验证使用场景1

在实际的开发中我们可能会有这样的情况。我们希望可以在用户输入完成之后失去焦点之后进行验证。如果验证不通过则提交错误信息。如果想要实现这个效果。需要添加一个自定义的指令。

app.directive("ngFoucus",[function(){
var FOCUS_CLASS="ng-focused";
return{
restrict:"A",
require:"ngModel",
link:function(scope,element,attrs,ctrl){
        ctrl.$focused=false;

element.bind("focus",function(evt){
element.addclass(FOCUS_CLASS);
scope.$apply(function(){
 ctrl.$focused=true;});
}).
bind("blur",function(evt){
element.removeClass(FOCUS_CLASS);
scope.$apply(function(){
 ctrl.$focused=false;});});}}
}]);

将ngFocus指令添加到input元素上就可以使用这个指令。

ngFocus指令给表单输入字段的blur和focus添加了对应的行为。添加了一个名为ng-foucsed的类并将$focused的值设置为true。接下来，可以根据表单是否具有焦点来展示独立的错误信息。如下

当然也可以在ngModel控制中使用$isEmpty()方法来判断输入的字段是否为空。当输入字段为空时返回true否则返回false。

angular新版本的表单验证

在之前的代码中angular的表单验证是相对比较复杂的组件。用起来并不是特别的方便。也不够简洁。
但是在新得angular版本以后（1.3+）我们可以使用更简单的方式来做表单验证。

ng-messages

要使用ng-messages这个指令。我们必须先安装这个模块。我们可以自己下载下来直接引用到页面上，或者使用
$bower install --save angular-messages 来安装
，安装完成之后呢。我们需要注入到模块中

angular.module("myapp",["ngMessages"])

为了对比之前的表单验证方式，这里我先使用老版本的表单验证写一个例子。

/*old*/



Signup


Your name


姓名不能为空
姓名太短
姓名太长










/*new*/



Your name


姓名不能为空
姓名太短
姓名太长

借助ngMessages 表单本身比之前的更简单了。并且更好理解。但是在上面的代码中还有一个问题，就是一次只能显示一个错误信息。
如果我们想同时显示所有的错误信息。也简单，我们只需在ng-messages 指令旁边加上 ng-messages-multiple


姓名不能为空
姓名太短
姓名太长

如果我们有很多的表单页的话。我们可以把一些通用的验证提示封装套一个模板页面中


姓名不能为空
姓名太短
姓名太长

然后我们可以在视图中使用 ng-messages-include 属性来引入这个模板来改进表单的结构

上面的示例当中都是使用angular自带的验证和ng-messages结合使用。那自定义验证如何操作呢？
比方说我想要创建一个自定义验证来实现验证表单中的用户名是否被注册：

/*首先创建一个自定义指令*/
app.directive("ensureUnique",function($http){
return {
require:"ngmodel",
link:function(scope,ele,attrs,ctrl){
var url=attrs.ensureUnique;
   ctrl.$parsers.push(function(val){
 if(!val||val.length==0)
retrun;
});
ngModel.$setValidity("checkingAvailability",true);
ngModel.$setValidity("usernameAvailablity",false);
$http({
 Method:"GET",
url:url,
params:{
username:val}
}).success(function(){
 ngModel.$setValidity("checkingAvailability",false);
ngModel.$setValidity("usernameAvailablity",true);
})["catch"](function(){
 ngModel.$setValidity("checkingAvailability",false);
ngModel.$setValidity("usernameAvailablity",false);
});
retrun val;
}
}
});

/*页面html*/



Your name


姓名不能为空
checking
用户名已经存在

在上面的用法中我们检查了错误信息的自定义属性。为了添加自定义的错误信息，我们将会把它们应用到自定义的ensureUnique指令的ngModel中。
这样一个自定义验证就完成了。在这里我只是演示了一个自定义验证的用法。angular的ng-messages还有很多其他的高级用法这里就不再一一介绍了。有兴趣的同学可以去angular官网查看文档。

结尾

以上就是关于angular表单验证的全部内容。本文作为自己的笔记的方式写了下来。文中的如有不足之处请指出。如果有问题的话可以留言。谢谢。

云服务器混合云验证表单表单验证表单验证代码表单验证实例

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78763.html

angular6的响应式表单

摘要：在模块里面引入要使用响应式表单，就要从包中导入，并把它添加到你的的数组中。导入验证器函数响应式表单包含了一组开箱即用的常用验证器函数。这些验证器属性可以和响应式表单提供的内置验证器组合使用。 1：在AppModule模块里面引入 ReactiveFormsModule 要使用响应式表单，就要从@angular/forms包中导入ReactiveFormsModule，并把它添加到你的N...

alogy 2019-08-29 16:54 评论0 收藏0
angular6的响应式表单

摘要：在模块里面引入要使用响应式表单，就要从包中导入，并把它添加到你的的数组中。导入验证器函数响应式表单包含了一组开箱即用的常用验证器函数。这些验证器属性可以和响应式表单提供的内置验证器组合使用。 1：在AppModule模块里面引入 ReactiveFormsModule 要使用响应式表单，就要从@angular/forms包中导入ReactiveFormsModule，并把它添加到你的N...

hzc 2019-08-02 11:40 评论0 收藏0
angular6的响应式表单

摘要：在模块里面引入要使用响应式表单，就要从包中导入，并把它添加到你的的数组中。导入验证器函数响应式表单包含了一组开箱即用的常用验证器函数。这些验证器属性可以和响应式表单提供的内置验证器组合使用。 1：在AppModule模块里面引入 ReactiveFormsModule 要使用响应式表单，就要从@angular/forms包中导入ReactiveFormsModule，并把它添加到你的N...

MycLambert 2019-08-23 12:16 评论0 收藏0
angular4 学习记录 -- 表单

摘要：在表单上添加的会拦截标准的表单提交事件。并为它们提供了一些共同的行为和属性，其中有些是可观察对象。用于跟踪一个单独的表单控件的值和有效性状态。组件中的顶级表单就是一个。在表单所在的中的上添加，再在指定的验证方法中调用来显示验证失败信息。 angular4 表单模板表单在app.module中导入FormsModule之后，项目中的form表单都会是一个ngForm，也就是一个模板表...

james 2019-08-21 16:45 评论0 收藏0