首页
所有分类
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 相关文章推荐
基于jQuery实现的当离开页面时出现提示的实现代码
Jun 27 Javascript
模拟select的代码
Oct 19 Javascript
javascript内置对象操作详解
Feb 04 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
Nov 16 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 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
小缇娜的奇幻之地(1) 帝国时代(1) 巫师(1) Docker(14) 我的世界(1) 守望先锋(1) 最终幻想(1) 艾尔登法环(1) 暴雪(1) 东方异文石(1)
You might like
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
深入学习jQuery Validate表单验证（二）
2016/01/18 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
温故知新——JavaScript中的字符串连接问题最全总结（推荐）
2017/08/21 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
javascript+css3开发打气球小游戏完整代码
2017/11/28 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
Python调用C语言开发的共享库方法实例
2015/03/18 Python
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
Python FFT合成波形的实例
2019/12/04 Python
Python networkx包的实现
2020/02/14 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
澳大利亚优质葡萄酒专家：Vintage Cellars
2019/01/08 全球购物
JYSK加拿大：购买家具、床垫、家居装饰等
2020/02/14 全球购物
写给女朋友的道歉信
2014/01/08 职场文书
校园达人秀策划书
2014/01/12 职场文书
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
创建省级文明单位实施方案
2014/02/27 职场文书
《小池塘》教学反思
2014/02/28 职场文书
教师产假请假条范文
2014/04/10 职场文书
2014年综治宣传月活动总结
2014/04/28 职场文书
神龙架导游词
2015/02/11 职场文书
红与黑读书笔记
2015/06/29 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript
进行数据处理的6个 Python 代码块分享
2022/04/06 Python
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python