angular 基于ng-messages的表单验证实例


Posted in Javascript onMay 04, 2017

最近在学习angular,那么今天也算个学习笔记吧!

html

<div class="form-group" ng-class="{'has-error': myForm.myName.$touched && myForm.myName.$invalid}">
  <label class="col-xs-2 control-label">name</label>
  <div class="col-xs-6">
    <input type="text" class="form-control" name="myName" ng-model="formData.username"
        placeholder="2-10个中英文字符,aaa会重名,必填"
        name-check minlength="2" maxlength="10" required>
  </div>
  <div class="col-xs-4 form-control-static text-danger" ng-messages="myForm.myName.$error"
           ng-messages-include="demos/form/error.html" ng-show="myForm.myName.$touched">
  </div>
</div>

ng-messages="myForm.myName.$error" 给出错误类型(required, char, exist, minlength)

error.html

<span ng-message="required">必填</span>
<span ng-message="char">非法字符</span>
<span ng-message="exist">名称已存在</span>
<span ng-message="minlength">太短了</span>

directive name-check 利用ngModel 的$validators,& $asyncValidators 添加自定义验证

app.directive('nameCheck', nameCheck);

nameCheck.$inject = ['HttpService', '$q'];

function nameCheck(HttpService, $q){

  var NAME_REG = /^[a-zA-Z\u4e00-\u9fa5]+$/;

  return {
    restrict: 'A',
    require: 'ngModel',
    link:function($scope,element,attrs,ctrl){

      ctrl.$validators.char = function(modelValue, viewValue) {
        var value = modelValue || viewValue;
        if(!NAME_REG.test(value)){
          return false;
        }
        return true;
      };
      ctrl.$asyncValidators.exist = function(modelValue, viewValue){
        var value = modelValue || viewValue;
        var deferred = $q.defer();
        HttpService.get('api/users/' + value).then(function(res) {
          if(res.isExist){
            deferred.reject(false);

          }
          deferred.resolve(true);
        })

        return deferred.promise;
      }
    }
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery团队打造的javascript单元测试工具QUnit介绍
Feb 26 Javascript
js 幻灯片的实现
Dec 06 Javascript
JavaScript中的私有/静态属性介绍
Jul 26 Javascript
jquery和javascript的区别(常用方法比较)
Jul 04 Javascript
js实现俄罗斯方块小游戏分享
Jan 31 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
Oct 27 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 Javascript
react中的DOM操作实现
Jun 30 Javascript
JS实现标签页切换效果
May 04 #Javascript
ES6下React组件的写法示例代码
May 04 #Javascript
JS触摸事件、手势事件详解
May 04 #Javascript
详解Angular 4.x Injector
May 04 #Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 #Javascript
详解Node.js串行化流程控制
May 04 #Javascript
纯原生js实现贪吃蛇游戏
Apr 16 #Javascript
You might like
PHP syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
Django教程笔记之中间件middleware详解
2018/08/01 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
Python图像读写方法对比
2020/11/16 Python
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
高中班长自我鉴定
2013/12/20 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
房屋所有权证明
2015/06/19 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书
团组织关系介绍信
2019/06/24 职场文书
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js
关于MySQL中explain工具的使用
2023/05/08 MySQL