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 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
实现连缀调用的map方法(prototype)
Aug 05 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
jquery实现倒计时效果
Dec 14 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
JavaScript原型式继承实现方法
Nov 06 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 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
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
python 字典(dict)按键和值排序
2016/06/28 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
python处理大日志文件
2019/07/23 Python
基于Python解密仿射密码
2019/10/21 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
python如何调用百度识图api
2020/09/29 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
公司人力资源的自我评价
2014/01/02 职场文书
大学军训通讯稿
2015/07/18 职场文书
护理工作心得体会
2016/01/22 职场文书
Mysql忘记密码解决方法
2022/02/12 MySQL