[AngularJS] AngularJS系列(3) 中级篇之表单验证
目录
基本验证
<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
属性类 | 描述 | |
$valid | ng-valid | Boolean 告诉我们这一项当前基于你设定的规则是否验证通过 |
$invalid | ng-invalid | Boolean 告诉我们这一项当前基于你设定的规则是否验证未通过 |
$pristine | ng-pristine | Boolean 如果表单或者输入框没有使用则为True |
$dirty | ng-dirty | Boolean 如果表单或者输入框有使用到则为True |
访问表单属性
方位表单: <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>
这里只是判断了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
本文地址:http://www.cnblogs.com/neverc/p/5912340.html
[AngularJS] AngularJS系列(3) 中级篇之表单验证的更多相关文章
- angularjs学习第五天笔记(第二篇:表单验证升级篇)
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- [jQuery学习系列五 ]5-Jquery学习五-表单验证
前言最近总是有一个感觉,虽然这些东西都自己学习并一个案例一个案例的去验证过了.但是总觉得不写成博客记录下来这些都不是自己的东西(心理作用,哈哈).所以每当学习或者复习相关的知识我都喜欢记录下来,下面开 ...
- 最适合入门的Laravel中级教程(三)表单验证
做开发有个原则是永远不能信任用户输入的数据: 即便前端已经做了验证: 在后端 php 也必须要再次验证: laravel 为表单验证提供了强大且简单的方案: 创建示例路由: routes/web.ph ...
- AngularJS 1.2.x 学习笔记(表单校验篇)
https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...
- AngularJs 入门系列-2 表单验证
对于日常的开发来说,最常见的开发场景就是通过表单编辑数据,这里涉及的问题就是验证问题. angularjs 内置已经支持了常见的验证方式,可以轻松实现表单验证. 1. 绑定 为了方便,我们在 $sco ...
- AngularJS系列:表单全解(表单验证,radio必选,三级联动,check绑定,form提交验证)
一.查看$scope -->寻找Form控制变量的位置 Form控制变量 格式:form的name属性.input的name属性.$... formName.inputField.$pristi ...
- angularjs学习第四天笔记(第一篇:简单的表单验证)
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- AngularJS 的表单验证
最近开始学习angularjs,学到表单验证的时候发现有必要学习下大神的好文章: 转:http://www.oschina.net/translate/angularjs-form-validatio ...
- AngularJS中使用的表单验证
Reference: http://www.tuicool.com/articles/2Qbiqi 客户端表单验证是AngularJS里面最酷的功能之一. AngularJS表单验证可以让你从一开始就 ...
随机推荐
- hibernate多对一双向关联
关联是类(类的实例)之间的关系,表示有意义和值得关注的连接. 本系列将介绍Hibernate中主要的几种关联映射 Hibernate一对一主键单向关联Hibernate一对一主键双向关联Hiberna ...
- DDD初学指南
去年就打算总结一下,结果新换的工作特别忙,就迟迟没有认真动手.主要内容是很多初学DDD甚至于学习很长时间的同学没有弄明白DDD是什么,适合什么情况.这世界上没有银弹,抛开了适合的场景孤立的去研究DDD ...
- nginx+iis+redis+Task.MainForm构建分布式架构 之 (redis存储分布式共享的session及共享session运作流程)
本次要分享的是利用windows+nginx+iis+redis+Task.MainForm组建分布式架构,上一篇分享文章制作是在windows上使用的nginx,一般正式发布的时候是在linux来配 ...
- DBSCAN密度聚类算法
DBSCAN(Density-Based Spatial Clustering of Applications with Noise,具有噪声的基于密度的聚类方法)是一种很典型的密度聚类算法,和K-M ...
- 【算法】(查找你附近的人) GeoHash核心原理解析及代码实现
本文地址 原文地址 分享提纲: 0. 引子 1. 感性认识GeoHash 2. GeoHash算法的步骤 3. GeoHash Base32编码长度与精度 4. GeoHash算法 5. 使用注意点( ...
- H3 BPM:为石化企业提供一个不一样的全停大修平台
H3 BPM大型炼化企业装置全停检修管理平台(简称"全停大修")结合国际化的流程管理理念.成熟的系统技术架构.优秀的行业解决方案,为石油化工行业全停大修提供了卓越的信息化管理方案, ...
- NOT IN 和NOT EXISTS
今天写了一个简单的NOT IN语句,结果跟预期大相径庭,百度之发现深坑一个,遂录之. 登陆账户表logins code name status a admin N b guest N c member ...
- jQuery 的选择器常用的元素查找方法
jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...
- Linux不能上网ping:unknown host问题怎么解决?
Linux不能上网提示ping:unknown host 检查步骤 Linux系统跟windows平台有所不同的是,为了更好的做网络服务应用.Linux下多用于网络服务器,而且操作界面是字符界面.对于 ...
- MySQL8:连接查询
连接查询 连接是关系型数据库模型的主要特点. 连接查询是关系型数据库中最主要的查询,主要包括内连接.外连接等通过联结运算符可以实现多个表查询. 在关系型数据库管理系统中,表建立时各种数据之间的关系不必 ...