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 相关文章推荐
javascript 贪吃蛇实现代码
Nov 22 Javascript
javascript 打印内容方法小结
Nov 04 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
基于javascript实现动态显示当前系统时间
Jan 28 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 Javascript
js实现楼层导航功能
Feb 23 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Oct 31 Javascript
layui table 多行删除(id获取)的方法
Sep 12 Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 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 fckeditor 调用的函数
2009/06/21 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
js实现圆盘记速表
2015/08/03 Javascript
js倒计时抢购实例
2015/12/20 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
深入解析Python中的集合类型操作符
2015/08/19 Python
Python正规则表达式学习指南
2016/08/02 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
python使用turtle库绘制时钟
2020/03/25 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
python字典排序的方法
2019/10/12 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
python如何求100以内的素数
2020/05/27 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
一道Delphi面试题
2016/10/28 面试题
生产文员岗位职责
2014/04/05 职场文书
初一学生评语大全
2014/04/24 职场文书
商务经理岗位职责
2014/08/03 职场文书
学校运动会加油词
2015/07/18 职场文书
运动会800米赞词
2015/07/22 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
python 中yaml文件用法大全
2021/07/04 Python
Spring Boot 实现 WebSocket
2022/04/30 Java/Android
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL