AngularJs实现ng1.3+表单验证


Posted in Javascript onDecember 10, 2015

前一篇文章详解AngularJS实现表单验证说过,ng1.3+以后对于表单验证有了优化,它不再需要一个详细的表达式状态创建元素显示或隐藏。

例如:我们在ng1.3之前的版本都需要如下写法:

<div class="error" ng-show="signup_form.name.$dirty && signup_form.name. $invalid && signup_form.submitted">

ng1.3之后新增了一个ngMessages指令,他被打包成一个模块发布,因此我们使用的时候只需要将这个依赖模块引入即可
angular.module('myApp', ['ngMessages']);

怎么用?

现在我们学习一下,它的用法,Code如下:

<!DOCTYPE html>
<html ng-app="myTest">
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Javascript/angular.js"></script>
    <script src="~/Javascript/angular-messages.js"></script>

    <style type="text/css">
      body {
        padding-top: 30px;
      }
    </style>
  </head>
  <body>
    <div class="col-md-6">
      <form role="form" name="myForm" class="form-horizontal" novalidate>
        <div class="form-group">
          <div class="col-md-2">
            用户名
          </div>
          <div class="col-md-10">
            <input type="text" placeholder="ng-Messages测试" name="name" ng-model="username.name"
                ng-minlength=3 ng-maxlength=20 required />
            <hr/>
            $error:{{myForm.name.$error}}
            <hr/>
            <div ng-messages="myForm.name.$error">
              <div ng-message="required">必填项</div>
              <div ng-message="minlength">字符太短小于3</div>
              <div ng-message="maxlength">字符太长大于20</div>
            </div> 
          </div>
        </div>
      </form>
    </div>
  </body>
</html>
<script type="text/javascript">
   angular.module("myTest", ['ngMessages']);
</script>

效果如下:

AngularJs实现ng1.3+表单验证

可以看出,其实ng是通过$error来监视模型的变化,因为$error中包含了错误的详细信息,同时,如果我们的应用场景中如果同时,有好几处错误,那么,上面代码按照ng-message的顺序只会显示一条错误信息,如果我们需要全部显示出来只需要添加 ng-messages-multiple

<input type="text" placeholder="测试" name="name" ng-model="username.name" ng-minlength=3 ng-maxlength=20 required />
<div ng-messages="myForm.name.$error" ng-messages-multiple>
<div ng-message="required">必填项</div>
<div ng-message="email">邮件格式不对</div>
<div ng-message="minlength">字符太短小于3</div>  
<div ng-message="maxlength">字符太长大于20</div>
</div>

效果如下:

AngularJs实现ng1.3+表单验证

怎么复用?

我们的验证信息在一个项目中大多是通用性很高的(对于样式,描述等都有高度的统一性),因此我们这里也会考虑到复用,ng中同样提供了解决方案

就是将其作为模板,指定请求路径由ng自动添加。这里再介绍一个指令 ng-messages-include

我们将上面的验证信息保存到一个独立的html静态页面中,然后使用ng-messages-include指定请求路径即可。

Code:

<div ng-messages="myForm.name.$error" ng-messages-multiple
    ng-messages-include ="@Url.Content("~/Content/template/error.html")">
  </div>

error.html

<div ng-message="required">必填项</div>
<div ng-message="email">邮件格式不对</div>
<div ng-message="minlength">字符太短小于3</div>
<div ng-message="maxlength">字符太长大于20</div>

效果如下:

AngularJs实现ng1.3+表单验证

当然,模板可能在特殊的时期某些字段错误提示不能满足你的要求,你可以添加自定义的提示如下:

<div class="error" ng-messages="signup_form.name.$error" 
ng-messages-include="templates/errors.html"> 
<!-- 
  按ng-message的顺序依次覆盖
--> 
</div>

自定义验证(指令)涉及到的细节知识点很多,如果简单地为了用而用,可能写得出功能,但是代码丑陋,太菜了,还需要花个把月方能弄懂点皮毛,这部分暂告一段落,等彻底明白了,在大家分享,大家亦可以结合《理解AngularJs指令》进行学习。

Javascript 相关文章推荐
双击滚屏-常用推荐
Nov 29 Javascript
从零开始学习jQuery (二) 万能的选择器
Oct 01 Javascript
jQuery实现长文字部分显示代码
May 13 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
理解AngularJs指令
Dec 10 #Javascript
详解AngularJS实现表单验证
Dec 10 #Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 #Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 #Javascript
jquery实现定时自动轮播特效
Dec 10 #Javascript
jQuery手动点击实现图片轮播特效
Apr 20 #Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 #Javascript
You might like
PHP三种方式实现链式操作详解
2017/01/21 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
javascript prototype原型操作笔记
2009/12/07 Javascript
JavaScript 语言的递归编程
2010/05/18 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
python getopt 参数处理小示例
2009/06/09 Python
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
Python常用库推荐
2016/12/04 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
python如何调用php文件中的函数详解
2020/12/29 Python
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
大专生自荐信
2013/10/04 职场文书
高分子材料与工程专业个人求职信
2013/12/15 职场文书
英文推荐信格式范文
2014/05/09 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
代办出身证明书
2014/10/21 职场文书
2016年国陪研修感言
2015/11/18 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs