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表单和输入验证实例

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

Javascript 相关文章推荐
JS中style属性
Oct 11 Javascript
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
Js 本页面传值实现代码
May 17 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
查找iframe里元素的方法可传参
Sep 11 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
Jquery中find与each方法用法实例
Feb 04 Javascript
js实现大转盘抽奖游戏实例
Jun 24 Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 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
You might like
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
关于this和self的使用说明
2010/08/01 Javascript
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
Nodejs极简入门教程(三):进程
2014/10/27 NodeJs
Node.js异步I/O学习笔记
2014/11/04 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
详解jQuery中的easyui
2018/09/02 jQuery
使用p5.js临摹动态图片
2019/11/04 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
编写Python的web框架中的Model的教程
2015/04/29 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
Python中property函数用法实例分析
2018/06/04 Python
Django单元测试工具test client使用详解
2019/08/02 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
Python super()方法原理详解
2020/03/31 Python
django项目中新增app的2种实现方法
2020/04/01 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
浙大网新C/C++面试解惑
2015/05/27 面试题
理工类毕业自我鉴定
2014/02/20 职场文书
境外导游求职信
2014/02/27 职场文书
安全生产计划书
2014/05/04 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
投资意向协议书
2015/01/29 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
六年级作文之关于梦
2019/10/22 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python
Python中glob库实现文件名的匹配
2021/06/18 Python