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 得到变量类型的函数
May 19 Javascript
JavaScript 获取当前时间戳的代码
Aug 05 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 Javascript
javascript闭包入门示例
Apr 30 Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 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
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
PHP imagecreatefrombmp 从BMP文件或URL新建一图像
2012/07/16 PHP
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
javascript 写类方式之二
2009/07/05 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
Python内建数据结构详解
2016/02/03 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
Free People中国官网:波西米亚风格女装服饰
2016/08/30 全球购物
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
中专毕业生自我鉴定
2013/11/21 职场文书
蔬菜基地的创业计划书
2014/01/06 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server