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获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 Javascript
jQuery的deferred对象使用详解
Aug 20 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 Javascript
采用call方式实现js继承
May 20 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 Javascript
vue cli3适配所有端方案的实现
Apr 13 Javascript
JavaScript中isPrototypeOf函数
Nov 07 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
Laravel 5框架学习之用户认证
2015/04/09 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
Python基于Tkinter实现的记事本实例
2015/06/17 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
对Python中range()函数和list的比较
2018/04/19 Python
Tesserocr库的正确安装方式
2018/10/19 Python
利用nohup来开启python文件的方法
2019/01/14 Python
Python对列表的操作知识点详解
2019/08/20 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
业务主管岗位职责
2013/11/20 职场文书
工作人员思想汇报
2014/01/09 职场文书
班主任对学生的评语
2014/04/26 职场文书
公司委托书格式
2014/08/01 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python
vue实现锚点定位功能
2021/06/29 Vue.js
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android