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 相关文章推荐
JavaScript 的方法重载效果
Aug 07 Javascript
JS 判断undefined的实现代码
Nov 26 Javascript
轻轻松松学JS调试(不下载任何工具)
Apr 14 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 Javascript
微信小程序实现日历小功能
Nov 18 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循环输出数据库内容的代码
2008/05/24 PHP
PHP和.net中des加解密的实现方法
2013/02/27 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
使用PHP开发留言板功能
2019/11/19 PHP
JavaScript定义类的几种方式总结
2014/01/06 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
python+django加载静态网页模板解析
2017/12/12 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
教育学专业实习生的自我鉴定
2013/11/26 职场文书
医学院校毕业生自荐信范文
2014/01/01 职场文书
单位消防安全制度
2014/01/12 职场文书
致青春观后感
2015/06/09 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
python如何进行基准测试
2021/04/26 Python
js Proxy的原理详解
2021/05/25 Javascript
python cv2图像质量压缩的算法示例
2021/06/04 Python
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers