angular学习的一些小笔记(中)之表单验证
表单验证
我去，我感觉我这个人其实还是一个很傻逼的一个人，老是因为拼错了一个单词或者怎么样就浪费我很长时间，这样真的不行不行，要正确对待这个问题，好了，说正题吧，angular也有表单验证minlength,maxlength,required呀这些个东西，还有也支持h5的那些验证,h5的那些验证，就是type啦，type='email',number,url呀这些，然后现在要用angular来验证，可以定义样式哈，不错，然后怎么验证呢，好的上代码
<!DOCTYPE html>
<html ng-app='app'>
<head>
<meta charset='UTF-8'>
<title>form1</title>
<link rel="stylesheet" type="text/css" href="static/plugins/bootstrap.min.css">
<script type="text/javascript" src='static/plugins/angular.min.js'></script>
<script type="text/javascript" src='static/plugins/angular-messages.js'></script>
</head>
<body>
<div class="col-md-6">
<form role="form" name="myForm" class="form-horizontal" novalidate>
<label>用户名</label>
<input type="email" placeholder="ng-Messages测试" name="name" ng-model="username.name"
ng-minlength= ng-maxlength= required /> <div ng-messages="myForm.name.$error">
<div ng-message="required">必填项</div>
<div ng-message="minlength">字符太短小于3</div>
<div ng-message="maxlength">字符太长大于20</div>
<div ng-message='email'>正确的邮箱格式</div>
</div>
</form>
</div>
</body>
<script type="text/javascript">
angular.module("app", ['ngMessages']);
</script>
</html>
这样就可以了，有几个点要声明一下，
第一就是要引入angular-messages.js，
第二就是message跟messages一定要看清楚啊，
第三myForm.name.$error:这个myForm就是form的name值,name就是要验证的input的name值。
第四就是这个还可以自定义验证哈。
恩第五的话明前还没有，大神们可以看看还有什么要注意的，欢迎指出。
自定义验证来说下怎么搞吧，上代码
<input type="text"
placeholder="Desired username"
name="username"
ng-model="signup.username"
ng-minlength=
ng-maxlength=
ensure-unique="username" required />
你看这个ensure-unique就是自定义的验证，就是需要独一无二呗，这就是在html上的写法，自定义的js代码就是自己写啦，这里也有一个这个对应的代码，是用指令写的，恩上代码
angular.module('myApp', [])
.directive('ensureUnique', ['$http', function($http) {
return {
require: 'ngModel',
link: function(scope, ele, attrs, c) {
scope.$watch(attrs.ngModel, function() {
$http({
method: 'POST',
url: '/api/check/' + attrs.ensureUnique,
data: {'field': attrs.ensureUnique}
}).success(function(data, status, headers, cfg) {
c.$setValidity('unique', data.isUnique);
}).error(function(data, status, headers, cfg) {
c.$setValidity('unique', false);
});
});
}
};
}]);
看到没，html，js两步完成自定义验证，就是自定义验证我感觉有点我有点low啊，搞不太来。反正我贴这两段代码就是告诉你们自定义验证的写法是咋样的，哈哈
恩，还有就是anglar的表单验证属性哈，反正上表格吧，一目了然哈，这个都是菜鸟网上有的，你们可以去搜索搜索哈
| 属性 | 描述 |
| $dirty | 表单有填写记录（这个我的理解就是required的啦，这个就是验证输入框有没有东西呗） |
| $valid | 字段内容合法的(这个就是要是你输入的东西符合你的要求了，就会出现的你给的提示哈，提示怎么出来呢，哈哈 对的，这些提示的出现都是用ng-show哈) |
| $invalid | 这个很明显就是内容不合法咯 |
| $pristine | 这个就是表单没有填写记录咯 |
然后呢，这个怎么用呢，好的，上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body> <h2>验证实例</h2> <form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate> <p>用户名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
</span>
</p> <p>邮箱:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
</span>
</p> <p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p> </form> <script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
});
</script> </body>
</html>
这个的用法总结几点，
1.只要用一个angular.js不需要引入别的js,但是缺点是什么你懂的啦，不能验证更多的条件啦，嘿嘿 ，这个看自己需求啦。
2.就是她是用ng-show来显示的，这里的myForm.user.$error.required这些个是怎么来的，还是跟上面一样的哈，都是name值，这个就是这样啦，你看required必填嘛，就对应这个$dirty啦so....myForm.user.$dirty ，哈哈 反正这些个代表的意思都在表格里啦。感觉这种的验证条件有效，还是那句话，看自己需求吧。
3.这种用法还有一个问题啊，就是比如说你要先验证一个required，你要是一开始输入框上没内容，他的那个验证提示是不会出现的，所以你要先js给它默认一个值，我感觉这种效果不好啊。所以你看到页面上$scope.user = 'John Doe';js给他先赋值了。
4.还要一个问题，你要先赋值嘛，然后你得搞个控制器啊，又得定义一个控制器，我感觉总结来说我还是觉得第一种方法好点吧。
5.还有一个问题，你每个Input记得绑定ng-model啊，要不然怎么监控。个人看法哈，
还有就是这两种其实也可以结合的，不行可以看代码。好的，上代码吧
<!DOCTYPE html>
<html ng-app='app'>
<head>
<meta charset='UTF-8'>
<title>form1</title>
<link rel="stylesheet" type="text/css" href="static/plugins/bootstrap.min.css">
<script type="text/javascript" src='static/plugins/angular.min.js'></script>
<script type="text/javascript" src='static/plugins/angular-messages.js'></script>
</head>
<body ng-controller='ctrl'>
<div class="col-md-6">
<form role="form" name="myForm" class="form-horizontal" novalidate>
<label>用户名</label>
<input type="email" placeholder="ng-Messages测试" name="name" ng-model="username.name"
ng-minlength=3 ng-maxlength=20 required /> <div ng-messages="myForm.name.$error">
<div ng-message="required">必填项</div>
<div ng-message="minlength">字符太短小于3</div>
<div ng-message="maxlength">字符太长大于20</div>
<div ng-message='email'>正确的邮箱格式</div>
</div>
名字 <input type='text' name='name1' ng-model='name1' required>
<span style='color:red' ng-show='myForm.name1.$dirty'>
<span ng-show='myForm.name1.$error.required'>名字是必须的</span>
</span>
</form>
</div>
</body>
<script type="text/javascript">
var app=angular.module("app", ['ngMessages']);
app.controller('ctrl',function($scope){
$scope.name1='wenwen';
})
</script>
</html>
就是这样子。
然后下午再看的时候就发现还有formName.submitted这个属性，可以用来判断你有没有点击提交，上面都是边写然后提示就出来了，按照这一点你可以提交的时候然后统一提示。上链接http://jsbin.com/ePomUnI/6/edit?html,js,output
angular学习的一些小笔记(中)之表单验证的更多相关文章
- angular学习的一些小笔记(中)之ng-disabled轻松实现按钮是否可点击状态
哇,这个可以轻松实现输入值就按钮可点击,输入框没有值则不可点击的状态呀 看代码 <!doctype html> <html ng-app=""> <h ...
- angular学习的一些小笔记(中)之基础ng指令
一.布尔属性指令: ng-disabled:就是ng-disabled=true-->就指向不可用 <!doctype html> <html ng-app="&qu ...
- angular学习的一些小笔记(中)之双向数据绑定
<!doctype html> <html ng-app=""> <head> <script src="https://aja ...
- angular学习的一些小笔记(中)之ng-init
ng-init是给angular执行给定的表达式,初始化变量的值 <!DOCTYPE html> <html> <head> <meta charset='U ...
- angular学习的一些小笔记(中)之directive
directive里面的几个配置,上代码就清晰了 <!DOCTYPE html> <html ng-app='app'> <head> <meta chars ...
- angular学习笔记(二十)-表单验证
本篇主要介绍angular中的表单验证: 表单验证主要有以下一些内容: 1. required指令: 相当于html5的required属性,验证不能为空 2. ng-maxlength属性: 验证内 ...
- angular中的表单验证
angular中的表单验证很强大, 一共有5中验证信息,$valid,$invalid,$pristine,$dirty,$error. $valid-----当验证通过的时候,为true,不通过的时 ...
- 【js类库AngularJs】学习angularJs的指令（包括常见表单验证，隐藏等功能）
[js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀 ...
- AngularJS中的表单验证
AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...
随机推荐
- Android之自动文本输入识别提示
相信大家都熟悉自动识别提示吧,在我们的生活中随处可见,今天就让我为大家简单介绍一下它是如何设计的. 所谓自动识别输入即是根据用户输入的已有信息,为用户提示可能的值,方便用户完成输入.在Android设 ...
- 面试准备 - HashTable 的C#实现 开放地址法
Hashtable是很经常在面试中遇到的数据结构,因为他的O(1)操作时间和O(n)空间 之所以自己写一份是因为: 加深对于hashtable的理解 某些公司面试的时候需要coding....... ...
- H5游戏开发之抓住小恐龙
第一次写技术性博文,以前都只是写一些生活感想,记录一些生活发生的事情. 博主大三学生一枚,目前学习JS一年多,还处于学习阶段,有什么说的不好的希望大牛指点下,由于第一次写博文,排版什么的有待改进,希望 ...
- javaccript学习2
[Javascript]javascript学习 十六 JavaScript 事件 事件是可以被 JavaScript 侦测到的行为. 事件 JavaScript 使我们有能力创建动态页面.事件是可以 ...
- 使用NuGet管理项目类库引用
NuGet 是微软开发平台(包括.NET平台)的一个包管理器,这里只介绍和.NET相关的NuGet Visual Studio扩展客户端, 在VS2010 ,VS2012 ,VS2013中默认集成了N ...
- Elasticsearch 管理文档
ES支持近实时的索引.更新.查询.删除文档,近实时就意味着刚刚索引的数据需要1秒钟后才能搜索到,这也是与传统的SQL数据库不同的地方. 更多的ES文档资料参考:Elasticsearch官方文档翻译 ...
- Entity Framework想说爱你不容易，这么多的报错，这么多的限制，该如何解决？
首先看一下采用MODEL FIRST的方式设计的实体模型对象关系图: 注意:EntityOne中有导航属性:EntityTwo 在如下代码中的几种情况进行新增操作,均会报错,新增都不会成功: stat ...
- 用redux构建购物车
很久没更新博客了,最近要用到react,再来跟大家分享一个redux案例吧. [ {"id": 1, "title": "iPad 4 Mini&qu ...
- 扫描线 + 线段树 ： 求矩形面积的并 ---- hnu : 12884 Area Coverage
Area Coverage Time Limit: 10000ms, Special Time Limit:2500ms, Memory Limit:65536KB Total submit user ...
- 当 IDENTITY_INSERT 设置为 OFF 时，不能向表 '#TT' 中的标识列插入显式值。 sql server 临时表
当 IDENTITY_INSERT 设置为 OFF 时,不能向表 '#TT' 中的标识列插入显式值.我是在SqlServer写存储过程中遇到的这个错误,当时就心想:临时表怎么会有主键呢,我也没有设置主 ...