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 相关文章推荐
购物车选中得到价格实现示例
Jan 26 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
Vuex的初探与实战小结
Nov 26 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
vue中使用v-model完成组件间的通信
Aug 22 Javascript
vue开发中遇到的问题总结
Apr 07 Javascript
Vant picker 多级联动操作
Nov 02 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操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
python dict remove数组删除(del,pop)
2013/03/24 Python
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
英国女装网上商店:I Saw It First
2018/10/18 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
自荐书格式
2013/12/01 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
开业庆典主持词
2014/03/21 职场文书
2014年大学生就业规划书
2014/04/04 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
2016公司新年问候语
2015/11/11 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis
python标准库ElementTree处理xml
2022/05/20 Python
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server