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的图片轮播 tab切换组件
Jul 19 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
jQuery自带的一些常用方法总结
Sep 03 Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 Javascript
基于JavaScript实现表格隔行换色
May 08 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 Javascript
如何利用JavaScript编写一个格斗小游戏
Jan 06 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开发过程中关于继承的使用方法分享
2011/06/17 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
在Javascript中定义对象类别
2006/12/22 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
js实现五星评价功能
2017/03/08 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
实例详解带参数的 npm script
2019/05/28 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
Python Queue模块详解
2014/11/30 Python
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
html5清空画布方法(三种)
2017/10/16 HTML / CSS
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
英国健身超市:Fitness Superstore
2019/06/17 全球购物
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
消防器材管理制度
2014/01/28 职场文书
横空出世观后感
2015/06/09 职场文书
家长会感言
2015/08/01 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书
mysql配置SSL证书登录的实现
2021/09/04 MySQL
mysql全面解析json/数组
2022/07/07 MySQL