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 相关文章推荐
二行代码解决全部网页木马
Mar 28 Javascript
dwr spring的集成实现代码
Mar 22 Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
Jun 09 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
Sep 27 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
微信公众号 客服接口的开发实例详解
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
一个php作的文本留言本的例子(六)
2006/10/09 PHP
在php MYSQL中插入当前时间
2008/04/06 PHP
PHP异步调用socket实现代码
2012/01/12 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
Js四则运算函数代码
2012/07/21 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
javascript每日必学之循环
2016/02/19 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
Python 深入理解yield
2008/09/06 Python
Python中的异常处理学习笔记
2015/01/28 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
python处理按钮消息的实例详解
2017/07/11 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
python批量修改交换机密码的示例
2020/09/22 Python
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
夜大毕业生自我鉴定
2013/10/31 职场文书
给校长的建议书
2014/03/12 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
英文求职信范文
2014/05/23 职场文书
教师节联欢会主持词
2015/07/04 职场文书