Angular表单验证实例详解


Posted in Javascript onOctober 20, 2016

表单验证

我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,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=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> 
</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=3 
ng-maxlength=20 
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的表单验证属性哈,反正上表格吧,一目了然哈,这个都是菜鸟网上有的,你们可以去搜索搜索哈

Angular表单验证实例详解

然后呢,这个怎么用呢,好的,上代码

<!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>

就是这样子。

以上所述是小编给大家介绍的Angular表单验证实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript 读书笔记索引贴
Jan 11 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 Javascript
vue-cli 关闭热更新操作
Sep 18 Javascript
ES6学习教程之Promise用法详解
Nov 22 Javascript
NODE.JS跨域问题的完美解决方案
Oct 20 #Javascript
seajs学习教程之基础篇
Oct 20 #Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 #Javascript
Javascript中内建函数reduce的应用详解
Oct 20 #Javascript
基于AngularJS前端云组件最佳实践
Oct 20 #Javascript
分享javascript、jquery实用代码段
Oct 20 #Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 #Javascript
You might like
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
PHP Include文件实例讲解
2019/02/15 PHP
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
angular2 组件之间通过service互相传递的实例
2018/09/30 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
2019/11/13 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
python cookielib 登录人人网的实现代码
2012/12/19 Python
Python程序设计入门(2)变量类型简介
2014/06/16 Python
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
Python正则表达式经典入门教程
2017/05/22 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
python dlib人脸识别代码实例
2019/04/04 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
如何掌握自荐信格式呢
2013/11/19 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
会议主持词
2014/03/17 职场文书
捐书倡议书
2014/08/29 职场文书
护士医德医风自我评价
2014/09/15 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
2015迎新晚会活动总结
2015/07/16 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL