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 相关文章推荐
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
JavaScript实现页面5秒后自动跳转的方法
Apr 16 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
js实现上传图片及时预览
May 07 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 Javascript
layui框架与SSM前后台交互的方法
Sep 12 Javascript
vue随机验证码组件的封装实现
Feb 19 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
理解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定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
Python实现的批量下载RFC文档
2015/03/10 Python
如何将python中的List转化成dictionary
2016/08/15 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
django连接mysql配置方法总结(推荐)
2018/08/18 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
机械系大学毕业生推荐信
2013/11/27 职场文书
英语课外活动总结
2014/08/27 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
党员查摆剖析材料
2014/10/10 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
2015年母亲节寄语
2015/03/23 职场文书
导游词之吉林花园山
2019/10/17 职场文书
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python