首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

AngularJS表单和输入验证实例

Posted in Javascript onNovember 02, 2016

AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。

注意：客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。

1、HTML 控件

以下 HTML input 元素被称为 HTML 控件:input 元素、select 元素、button 元素、textarea 元素。

2、HTML 表单

 AngularJS 表单是输入控件的集合。HTML 表单通常与 HTML 控件同时存在。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>angularJs</title> 
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script> 
</head> 
<body> 
<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>

AngularJS表单和输入验证实例

3、输入验证

AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>angularJs</title> 
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script> 
</head> 
<body> 
<h2>验证实例</h2> 
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate> 
<p>用户名: 
<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>邮  箱: 
<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>

AngularJS表单和输入验证实例

AngularJS ng-model 指令用于绑定输入元素到模型中。模型对象有两个属性： user 和 email。我们使用了 ng-show指令，color:red 在邮件是 $dirty 或 $invalid 才显示。
AngularJS表单和输入验证实例

没用初始值的输入验证：注意ng-app=""，ng-app有值就必须连接到代码模块，利用angular.module 函数来创建模块。
 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>angularJs</title> 
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script> 
</head> 
<body> 
<h2>验证实例</h2> 
<form ng-app="" name="myForm" novalidate> 
<p>用户名: 
<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>邮  箱: 
<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> 
</body> 
</html>

AngularJS表单和输入验证实例

4、ng-disabled实例

<!doctype html> 
<html ng-app="MyApp"> 
  <head> 
    <script src="js/angular.min.js"></script> 
  </head> 
  <body> 
    <div ng-controller="Controller"> 
      <form name="form" class="css-form" novalidate> 
        Name: 
        <input type="text" ng-model="user.name" name="uName" required /><br/> 
        E-mail: 
        <input type="email" ng-model="user.email" name="uEmail" required /><br/> 
        <div ng-show="form.uEmail.$dirty && form.uEmail.$invalid"> 
          Invalid: 
          <span ng-show="form.uEmail.$error.required">Tell us your email.</span> 
          <span ng-show="form.uEmail.$error.email">This is not a valid email.</span> 
        </div> 
        Gender:<br/> 
        <input type="radio" ng-model="user.gender" value="male" /> 
        male 
        <input type="radio" ng-model="user.gender" value="female" /> 
        female<br/> 
        <input type="checkbox" ng-model="user.agree" name="userAgree" required /> 
        I agree: 
        <input ng-show="user.agree" type="text" ng-model="user.agreeSign" required /> 
        <div ng-show="!user.agree || !user.agreeSign"> 
          Please agree and sign. 
        </div> 
        <br/> 
        <!--ng-disabled为true时禁止使用，ng-disabled实时监控应用程序--> 
        <button ng-click="reset()" ng-disabled="isUnchanged(user)"> 
          RESET 
        </button> 
        <button ng-click="update(user)" ng-disabled="form.$invalid || isUnchanged(user)"> 
          SAVE 
        </button> 
      </form> 
    </div> 
  <script type="text/javascript"> 
    var app=angular.module("MyApp",[]); 
    app.controller("Controller",function($scope){ 
      $scope.master = {}; 
      $scope.update=function(user){ 
        $scope.master=$scope.copy(user); 
      }; 
      $scope.reset=function(){ 
        $scope.user=angular.copy($scope.master); 
      }; 
      $scope.isUnchanged=function(user){ 
        //判断user和$scope.master是否相等，相等返回true，否则返回false 
        return angular.equals(user,$scope.master); 
      }; 
      $scope.reset(); 
    }); 
  </script> 
  </body> 
</html>

AngularJS表单和输入验证实例

5、ng-submit实例

<html ng-app='TestFormModule'> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <script src="js/angular.min.js"></script> 
  </head> 
  <body><!--ng-submit绑定表单提交事件--> 
    <form name="myForm" ng-submit="save()" ng-controller="TestFormModule"> 
       <input name="userName" type="text" ng-model="user.userName" required/> 
       <input name="password" type="password" ng-model="user.password" required/><br /> 
       <input type="submit" ng-disabled="myForm.$invalid"/> 
    </form> 
  </body> 
  <script type="text/javascript"> 
    var app=angular.module("TestFormModule",[]); 
    app.controller("TestFormModule",function($scope){ 
      $scope.user={ 
        userName:"山水子农", 
        password:'' 
      }; 
      $scope.save=function(){ 
        console.log("保存数据中..."); 
      } 
    }); 
  </script> 
</html>

AngularJS表单和输入验证实例

6、maxlength和minlength实例

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <script src="js/angular.js" type="text/javascript" charset="utf-8"></script> 
    <title>表单验证</title> 
  </head> 
  <body ng-app="myApp" > 
  <div ng-controller="myCtrl"> 
  <form name="form"> 
   <label for="maxlength">Set a maxlength: </label> 
   <input type="number" ng-model="maxlength" id="maxlength" /><br> 
   <label for="minlength">Set a minlength: </label> 
   <input type="number" ng-model="minlength" id="minlength" /><br><hr> 
   <label for="input">This input is restricted by the current maxlength and minlength: </label><br> 
   <input type="text" ng-model="textmodel" id="text" name="text" ng-maxlength="maxlength" ng-minlength="minlength"/><br> 
   text input valid? = <code>{{form.text.$valid}}</code><br> 
   text model = <code>{{textmodel}}</code><br><hr> 
   <label for="input">This input is restricted by the current maxlength and minlength: </label><br> 
   <input type="number" ng-model="numbermodel" id="number" name="number" ng-maxlength="maxlength" ng-minlength="minlength"/><br> 
   number input valid? = <code>{{form.number.$valid}}</code><br> 
   number model = <code>{{numbermodel}}</code> 
  </form> 
  </div>   
  <script type="text/javascript"> 
    var app=angular.module("myApp",[]); 
    app.controller("myCtrl",function($scope){ 
      $scope.maxlength=8; 
      $scope.minlength=4; 
    }); 
  </script> 
  </body> 
</html>

AngularJS表单和输入验证实例

7、ng-class实例

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <script src="js/angular.js" type="text/javascript" charset="utf-8"></script> 
    <title>表单验证</title> 
    <style type="text/css"> 
    .deleted { 
     text-decoration: line-through; 
    } 
    .bold { 
     font-weight: bold; 
    } 
    .red { 
     color: red; 
    } 
    .error { 
     color: red; 
     background-color: yellow; 
    } 
    .base-class { 
     transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 
    } 
    .base-class.my-class { 
     color: red; 
     font-size:3em; 
    } 
    </style> 
  </head> 
  <body ng-app="myApp" > 
  <div ng-controller="myCtrl"> 
  <form name="form"> 
    <p ng-class="{deleted: deleted, bold: bold, 'error': error}">Map Syntax Example</p> 
    <label><input type="checkbox" ng-model="deleted">deleted (apply "deleted" class)</label><br> 
    <label><input type="checkbox" ng-model="bold">bold (apply "bold" class)</label><br> 
    <label><input type="checkbox" ng-model="error">error (apply "error" class)</label> 
    <hr> 
    <input id="setbtn" type="button" value="set" ng-click="myVar='my-class'"> 
    <input id="clearbtn" type="button" value="clear" ng-click="myVar=''"> 
    <br> 
    <span class="base-class" ng-class="myVar">Sample Text</span> 
  </form> 
  </div>   
  <script type="text/javascript"> 
    var app=angular.module("myApp",[]); 
    app.controller("myCtrl",function($scope){ 
    }); 
  </script> 
  </body> 
</html><strong> 
</strong>

AngularJS表单和输入验证实例

8、ng-if实例

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <script src="js/angular.js" type="text/javascript" charset="utf-8"></script> 
    <title>表单验证</title> 
    <style> 
    .animate-if { 
     width:400px; 
     border:2px solid yellowgreen; 
     border-radius: 10px; 
     padding:10px; 
     display: block; 
    }  
    </style> 
  </head> 
  <body ng-app="myApp" > 
  <div ng-controller="myCtrl"> 
  <form name="form"> 
    <label>Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/> 
    Show when checked: 
    <span ng-if="checked" class="animate-if"> 
    This is removed when the checkbox is unchecked. 
    </span> 
  </form> 
  </div>   
  <script type="text/javascript"> 
    var app=angular.module("myApp",[]); 
    app.controller("myCtrl",function($scope){ 
    }); 
  </script> 
  </body> 
</html>

AngularJS表单和输入验证实例

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

AngularJS表单和输入验证实例

- Author -

A_山水子农

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
google地图的路线实现代码
Aug 20 Javascript
ExtJs的Date格式字符代码
Dec 30 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
微信小程序 自定义消息提示框
Aug 06 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
使用vue如何构建一个自动建站项目
Feb 05 Javascript
一文了解vue-router之hash模式和history模式
May 31 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 Javascript
AngularJS入门教程之数据绑定原理详解
Nov 02 #Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 #Javascript
JavaScript 数组的深度复制解析
Nov 02 #Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 #Javascript
Centos7 中 Node.js安装简单方法
Nov 02 #Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 #Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 #Javascript
http(6) Telnet(1) 远程控制(1) 负载均衡(6) IIS(7) Windows server 2019(5) Windows server 2016(6) https(7) 动静分离(1) 生成缩略图(1)
You might like
PHP开发大型项目的一点经验
2006/10/09 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
如何判断php mysqli扩展类是否开启
2016/12/24 PHP
详解php协程知识点
2018/09/21 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
javascript基本包装类型介绍
2015/04/10 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
python中模块的__all__属性详解
2017/10/26 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
Tensorflow中的图（tf.Graph）和会话（tf.Session）的实现
2020/04/22 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
大学生优秀团员事迹材料
2014/01/30 职场文书
国培计划培训感言
2014/03/11 职场文书
财产保全担保书范文
2014/04/01 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
慰问信格式
2015/02/14 职场文书
教师听课学习心得体会
2016/01/15 职场文书
初中英语教学反思范文
2016/02/15 职场文书