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类和继承 constructor属性
Mar 04 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
初识Javascript小结
Jul 16 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
javaScript产生随机数的用法小结
Apr 21 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 Javascript
小程序实现左滑删除的效果的实例代码
Oct 19 Javascript
Vue实现省市区三级联动
Dec 27 Vue.js
JS相册图片抖动放大展示效果的示例代码
Jan 29 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
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
JavaScript类和继承 constructor属性
2010/03/04 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
2015/10/20 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
vue-router传参用法详解
2019/01/19 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
python pandas时序处理相关功能详解
2019/07/03 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
python生成器用法实例详解
2019/11/22 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
Pycharm中如何关掉python console
2020/10/27 Python
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
社团成立邀请函
2014/01/08 职场文书
应届毕业生个人求职信范文
2014/01/29 职场文书
社会学专业学生职业规划书
2014/02/07 职场文书
好的旅游活动方案
2014/08/19 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB