首页
所有分类
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 相关文章推荐
JavaScript的eval JSON object问题
Nov 15 Javascript
js禁止回车提交表单的示例代码
Dec 23 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
同步文本框内容JS代码实现
Aug 04 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 Javascript
js实现淘宝首页的banner栏效果
Nov 26 Javascript
浅谈JavaScript 声明提升
Sep 14 Javascript
解决Vue项目中tff报错的问题
Oct 21 Javascript
JS实现选项卡插件的两种写法（jQuery和class）
Dec 30 jQuery
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
动态代理(1) pongo2(1) 模板引擎(1) element-ui(1) Carbon(1) 连接查询(1) 复合索引(1) 逻辑函数(1) 数据合并(1) BufferPool(1)
You might like
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
超级强大的表单验证
2006/06/26 Javascript
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
Angularjs为ng-click事件传递参数
2017/06/15 Javascript
浅谈AngularJS中使用$resource（已更新）
2017/09/14 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
[00:44]华丽开场！DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
Python中文件遍历的两种方法
2014/06/16 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
苹果香港官方商城：Apple香港
2016/09/14 全球购物
期末总结的个人自我评价
2013/11/02 职场文书
工业自动化专业毕业生推荐信
2013/11/18 职场文书
优秀实习生感言
2014/03/01 职场文书
一岗双责责任书
2014/04/15 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
家长给老师的感谢信
2015/01/20 职场文书
项目建议书
2015/02/04 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
消防验收申请报告
2015/05/15 职场文书
岁月神偷观后感
2015/06/11 职场文书
Python预测分词的实现
2021/06/18 Python
2021年国漫热度排行前十，完美世界上榜，第四是美国动画作品
2022/03/18 国漫