AngularJS表单验证中级篇(3)


Posted in Javascript onSeptember 28, 2016

目录

基本验证
验证插件messages
自定义验证 

基本验证

<form name="form" novalidate ng-app>
  <span>{{form.$invalid}}</span>
  <span>{{form.$valid}}</span>
  <span>{{form.$dirty}}</span>
  <span>{{form.$pristine}}</span>
  <input type="text" ng-model="user" required />
  <input type="text" ng-model="pwd" required minlength="4" ng-maxlength="5" />
  <input type="text" ng-model="phone" required ng-pattern="/1[3|5|7|8|][0-9]{9}/" />
  <input type="email" ng-model="email" required />
  <input type="url" ng-model="url" required />
  <input type="number" ng-model="number" required />
  <div>
    <button type="reset" ng-disabled="form.$pristine">重置</button>
    <button type="submit" ng-disabled="form.$invalid">提交</button>
  </div>
</form>

以上展示了基本的ng验证.

这里重点介绍一下上面的特例:

novalidate:禁用H5自带的验证

ng-maxlength: 如果不写ng,maxlength则直接限制最多输入字符,稍微有点区别(IE9 + Chrome 测试)

ng-pattern:通过正则验证,如果不写ng开头,无验证效果.

注:要启用验证 同时需要绑定一个ng-model 

AngularJS表单验证中级篇(3)

访问表单属性

---方位表单: <form name>.<angular property>

---访问一个输入框: <form name>.<input name>.<angular property> 

验证插件

在介绍messages插件之前,我们看下本来的验证提示

<form name="form" ng-app novalidate>
  <span>{{form.user.$error.required?'user该项必填':''}}</span>
  <input type="text" ng-model="user" name="user" required />
  <span>{{form.pwd.$error.required?'pwd该项必填':''}}</span>
  <input type="text" ng-model="pwd" name="pwd" required />
  <span>{{form.info.$error.required?'info该项必填':''}}</span>
  <input type="text" ng-model="info" name="info" required />
  <span>{{form.age.$error.required?'age该项必填':''}}</span>
  <input type="text" ng-model="age" name="age" required />
  <div>
    <button type="submit" ng-disabled="form.$invalid">提交</button>
  </div>
</form>

AngularJS表单验证中级篇(3)

这里只是判断了require 当我们的代码 我们重复写了很多3元表达式 

messages插件就是更友好的解决重复的问题

<form name="form" ng-app="myApp" novalidate>
  <input type="email" ng-model="user" name="username" required minlength="4" />
  <div ng-messages="form.username.$error" ng-messages-multiple>
    <div ng-message="required">该项必填</div>
    <div ng-message="minlength">低于最低长度</div>
    <div ng-message="email">应为email</div>
  </div>
</form>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-messages.min.js"></script>
<script>
  angular.module('myApp', ['ngMessages']);
</script>

Nuget:Install-Package AngularJS.Messages

自定义验证

通过基本的验证方式,我们已经能够解决大部分的验证问题.但项目中永远充满着各种各样的需求.

在ng中的自定义验证,一般通过指令的形式创建.

<form name="form" ng-app="myApp" novalidate>
  <input type="email" ng-model="user" name="username" required ensure-unique minlength="4" />
  <div ng-messages="form.username.$error" ng-messages-multiple>
    <div ng-message="required">该项必填</div>
    <div ng-message="minlength">低于最低长度</div>
    <div ng-message="email">应为email</div>
    <div ng-message="unique">用户名已存在</div>
  </div>
</form>

在上面的messages插件Demo中,新建一行验证用户名已存在 以及 在input上添加了ensure-unique指令

同时,我们需要在js中定义ensure-unique指令:

angular.module('myApp', ['ngMessages']).directive('ensureUnique', ['$http', '$timeout', '$window', function ($http, $timeout, $window) {
      return {
        restrict: "A",
        require: 'ngModel',
        link: function (scope, ele, attrs, ngModelController) {
          scope.$watch(attrs.ngModel, function (n) {
            if (!n) return;
            $timeout.cancel($window.timer);
            $window.timer = $timeout(function () {
              $http({
                method: 'get',
                url: '/api/checkusername/', //根据换成自己的url
                params: {
                  "username": n
                }
              }).success(function (data) {
                ngModelController.$setValidity('unique', data.isUnique); //这个取决于你返回的,其实就是返回一个是否正确的字段,具体的这块可以自己修改根据自己的项目
              }).error(function (data) {
                ngModelController.$setValidity('unique', false);
              });
            }, 500);
          });
        }
      };
    }]);

指令不是本节重点内容,这里简单说下

ngModelController.$setValidity('unique', bool);

通过该API可以设置$error.unique.

setValidity为true,则$error.unique为false

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

Javascript 相关文章推荐
jquery $.ajax入门应用二
Nov 19 Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
详解如何在微信小程序中愉快地使用sass
Jul 30 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
vue实现循环切换动画
Oct 17 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
微信公众号 客服接口的开发实例详解
Sep 28 #Javascript
jQuery解析XML 详解及方法总结
Sep 28 #Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 #Javascript
微信小程序 实例应用(记账)详解
Sep 28 #Javascript
JavaScript 闭包详细介绍
Sep 28 #Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 #Javascript
bootstrap datepicker限定可选时间范围实现方法
Sep 28 #Javascript
You might like
PHP4.04简明安装
2006/10/09 PHP
php数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
php绘制圆形的方法
2015/01/24 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
Python搭建FTP服务器的方法示例
2018/01/19 Python
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
Linux如何为某个操作添加别名
2013/03/01 面试题
个人简历自我鉴定
2013/10/11 职场文书
初中生个人学习的自我评价
2013/12/04 职场文书
节水口号标语
2014/06/19 职场文书
宣传活动总结范文
2014/07/01 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android