AngularJS表单详解及示例代码


Posted in Javascript onAugust 17, 2016

AngularJS提供丰富填写表单和验证。我们可以用ng-click来处理AngularJS点击按钮事件,然后使用 $dirty 和 $invalid标志做验证的方式。使用novalidate表单声明禁止任何浏览器特定的验证。表单控件使用了大量的角活动。让我们快速浏览一下有关事件先。

事件

AngularJS提供可与HTML控件相关联的多个事件。例如ng-click通常与按钮相关联。以下是AngularJS支持的事件。

ng-click

ng-dbl-click

ng-mousedown

ng-mouseup

ng-mouseenter

ng-mouseleave

ng-mousemove

ng-mouseover

ng-keydown

ng-keyup

ng-keypress

ng-change

ng-click

使用点击一个按钮的指令,表单重置数据。

<input name="firstname" type="text" ng-model="firstName" required>
<input name="lastname" type="text" ng-model="lastName" required>
<input name="email" type="email" ng-model="email" required>
<button ng-click="reset()">Reset</button>
<script>
  function studentController($scope) { 
   $scope.reset = function(){
     $scope.firstName = "Mahesh";
     $scope.lastName = "Parashar";
     $scope.email = "MaheshParashar@yiibai.com";
 }  
  $scope.reset();
}
</script>

验证数据

可使用下面跟踪误差。

$dirty - 规定值已被改变。

$invalid- 该值的状态是无效的。

$error- 指出确切的错误。

例子

下面的例子将展示上述所有指令。

testAngularJS.html

<html>
<head>
<title>Angular JS Forms</title>
<style>
table, th , td {
 border: 1px solid grey;
 border-collapse: collapse;
 padding: 5px;
}
table tr:nth-child(odd) {
 background-color: #f2f2f2;
}
table tr:nth-child(even) {
 background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">
<form name="studentForm" novalidate>
<table border="0">
<tr><td>Enter first name:</td><td><input name="firstname" type="text" ng-model="firstName" required>
  <span style="color:red" ng-show="studentForm.firstname.$dirty && studentForm.firstname.$invalid">
   <span ng-show="studentForm.firstname.$error.required">First Name is required.</span>
  </span>
</td></tr>
<tr><td>Enter last name: </td><td><input name="lastname" type="text" ng-model="lastName" required>
  <span style="color:red" ng-show="studentForm.lastname.$dirty && studentForm.lastname.$invalid">
   <span ng-show="studentForm.lastname.$error.required">Last Name is required.</span>
  </span>
</td></tr>
<tr><td>Email: </td><td><input name="email" type="email" ng-model="email" length="100" required>
<span style="color:red" ng-show="studentForm.email.$dirty && studentForm.email.$invalid">
   <span ng-show="studentForm.email.$error.required">Email is required.</span>
	 <span ng-show="studentForm.email.$error.email">Invalid email address.</span>
  </span>
</td></tr>
<tr><td><button ng-click="reset()">Reset</button></td><td><button 
	ng-disabled="studentForm.firstname.$dirty && studentForm.firstname.$invalid ||
			 studentForm.lastname.$dirty && studentForm.lastname.$invalid ||
			 studentForm.email.$dirty && studentForm.email.$invalid"
	ng-click="submit()">Submit</button></td></tr>
</table>
</form>
</div>
<script>
function studentController($scope) { 
  $scope.reset = function(){
		$scope.firstName = "Mahesh";
		$scope.lastName = "Parashar";
		$scope.email = "MaheshParashar@yiibai.com";
  }  
  $scope.reset();
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

输出

在Web浏览器打开textAngularJS.html。看到结果如下。

AngularJS表单详解及示例代码

以上就是AngularJS表单的知识整理,后续继续补充相关知识,谢谢大家对本站的支持!

Javascript 相关文章推荐
一种JavaScript的设计模式
Nov 22 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
JS操作Cookies的小例子
Oct 15 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
js实现的倒计时按钮实例
Jun 24 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
jQuery Migrate 插件用法实例详解
May 22 jQuery
laypage.js分页插件使用方法详解
Jul 27 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 Javascript
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
AngularJS模块详解及示例代码
Aug 17 #Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 #Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 #Javascript
AngularJS表格详解及示例代码
Aug 17 #Javascript
AngularJS过滤器详解及示例代码
Aug 16 #Javascript
AngularJS控制器详解及示例代码
Aug 16 #Javascript
AngularJS表达式讲解及示例代码
Aug 16 #Javascript
You might like
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
jquery实现excel导出的方法
2013/04/04 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
js简易版购物车功能
2017/06/17 Javascript
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
Python字符串处理之count()方法的使用
2015/05/18 Python
django 常用orm操作详解
2017/09/13 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
pycharm显示远程图片的实现
2019/11/04 Python
python爬虫添加请求头代码实例
2019/12/28 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
python如何删除列为空的行
2020/07/17 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
波兰多品牌运动商店:StreetStyle24.pl
2020/09/22 全球购物
大三自我鉴定范文
2013/10/05 职场文书
美德少年事迹材料
2014/01/23 职场文书
九年级语文教学反思
2014/02/04 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
毕业论文致谢范文
2015/05/14 职场文书
预备党员半年考察意见
2015/06/01 职场文书
JavaScript实现简单计时器
2021/06/22 Javascript
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android