基于AngularJS实现表单验证功能


Posted in Javascript onJuly 28, 2017

本文实例为大家分享了AngularJS实现表单验证功能的具体代码,供大家参考,具体内容如下

<!--实例解析

ng-app 指令定义了 AngularJS 应用。

ng-controller 指令定义了应用控制器。

ng-model 指令绑定了两个 input 元素到模型的 user 对象。

formCtrl 函数设置了 master 对象的初始值,并定义了 reset() 方法。

reset() 方法设置了 user 对象等于 master 对象。

ng-click 指令调用了 reset() 方法,且在点击按钮时调用。

novalidate 属性在应用中不是必须的,但是你需要在 AngularJS 表单中使用,用于重写标准的 HTML5 验证。 -->
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<script src="js/angular.js"></script>
</head>
<body>
<!-- Checkbox(单选框)
我们可以使用 ng-model 来绑定单选按钮到你的应用中。
单选框使用同一个 ng-model ,可以有不同的值,但只有被选中的单选按钮的值会被使用
-->
<form>
 选择一个选项:
 <input type="radio" ng-model="myVar" value="dogs">Dogs
 <input type="radio" ng-model="myVar" value="tuts">Tutorials
 <input type="radio" ng-model="myVar" value="cars">Cars
</form>
<div ng-switch="myVar">
 <div ng-switch-when="dogs">
   <h1>Dogs</h1>
   <p>Welcome to a world of dogs.</p>
 </div>
 <div ng-switch-when="tuts">
   <h1>Tutorials</h1>
   <p>Learn from examples.</p>
 </div>
 <div ng-switch-when="cars">
   <h1>Cars</h1>
   <p>Read about cars.</p>
 </div>
</div>
<p>ng-switch 指令根据单选按钮的选择结果显示或隐藏 HTML 区域。</p><br><br><br><br>

<!-- 下拉菜单
使用 ng-model 指令可以将下拉菜单绑定到你的应用中。
ng-model 属性的值为你在下拉菜单选中的选项
-->
<form>
 选择一个选项:
 <select ng-model="myVar2">
  <option value="">
  <option value="dogs">Dogs
  <option value="tuts">Tutorials
  <option value="cars">Cars
 </select>
</form>
<div ng-switch="myVar2">
 <div ng-switch-when="dogs">
   <h1>Dogs</h1>
   <p>Welcome to a world of dogs.</p>
 </div>
 <div ng-switch-when="tuts">
   <h1>Tutorials</h1>
   <p>Learn from examples.</p>
 </div>
 <div ng-switch-when="cars">
   <h1>Cars</h1>
   <p>Read about cars.</p>
 </div>
</div>
<p>ng-switch 指令根据下拉菜单的选择结果显示或隐藏 HTML 区域。</p><br><br><br><br>

<!-- novalidate-->
<form action="xxx.do" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
<p><strong>注意:</strong>在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 属性。这个属性可以关闭浏览器默认校验</p><br><br><br><br>


<!--Checkbox(复选框)
checkbox 的值为 true 或 false,可以使用 ng-model 指令绑定,它的值可以用于应用中-->
<div ng-app="">
 <form>
  选中复选框,显示标题:
  <input type="checkbox" ng-model="myVar">
 </form>
 <h1 ng-show="myVar">My Header</h1>
</div>
<p>标题使用了 ng-show 指令,复选框选中后显示 h1 标签内容。</p><br><br><br><br>

<!-- HTML 表单
HTML 表单通常与 HTML 控件同时存在
以下 HTML input 元素被称为 HTML 控件:

  input 元素
  select 元素
  button 元素
  textarea 元素
-->
<div ng-app="myApp" ng-controller="formCtrl">
 <form novalidate>
  First Name:<br>
  <input type="text" ng-model="user.firstName"><br>
  Last Name:<br>
  <input type="text" ng-model="user.lastName">
  <br><br>
  <button ng-click="reset()">RESET</button>
 </form>
 <p>form = {{user}}</p>
 <p>master = {{master}}</p>
</div>

<script>

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.master = {firstName: "John", lastName: "Doe"};
  $scope.reset = function() {

    $scope.user = angular.copy($scope.master);

  };
  $scope.reset();
});

</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
禁止ajax缓存获取程序最新数据的方法
Nov 19 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
Apr 29 Javascript
js验证手机号、密码、短信验证码代码工具类
Jun 24 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
javascript 中模板方法单例的实现方法
Oct 17 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
AngularJS service之select下拉菜单效果
Jul 28 #Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 #Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 #Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 #Javascript
基于JS实现移动端左滑删除功能
Jul 28 #Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 #Javascript
webpack实现热更新(实施同步刷新)
Jul 28 #Javascript
You might like
由php if 想到的些问题
2008/03/22 PHP
php 邮件发送问题解决
2014/03/22 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
再谈javascript原型继承
2014/11/10 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
Python中暂存上传图片的方法
2015/02/18 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
Python字符编码与函数的基本使用方法
2017/09/30 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
python 消费 kafka 数据教程
2019/12/21 Python
python实现图片转字符画的完整代码
2021/02/21 Python
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
国际象棋商店:The Chess Store
2018/07/09 全球购物
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
Linux文件操作命令都有哪些
2015/02/27 面试题
2014年销售人员工作总结
2014/11/27 职场文书
初三英语教学计划
2015/01/23 职场文书
商标侵权律师函
2015/05/27 职场文书
母亲节主题班会
2015/08/14 职场文书
员工给公司的建议书
2019/06/24 职场文书
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android