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 在线压缩和格式化收藏
Jan 16 Javascript
jQuery 使用手册(一)
Sep 23 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
vue通过数据过滤实现表格合并
Nov 30 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 Javascript
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+MySql编写聊天室
2006/10/09 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
快速排序 php与javascript的不同之处
2011/02/22 Javascript
js数组方法扩展实现数组统计函数
2014/04/09 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
python pyheatmap包绘制热力图
2018/11/09 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
Coccinelle官网:意大利的著名皮具品牌
2019/05/15 全球购物
就业自荐书
2013/12/05 职场文书
旅游与环境专业求职信
2014/06/05 职场文书
四查四看整改措施
2014/09/19 职场文书
申报材料格式
2014/12/30 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
 Python 中 logging 模块使用详情
2022/03/03 Python
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python