AngularJS表单和输入验证实例

2024-10-22 16:29:03

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>

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 ng-model 指令用于绑定输入元素到模型中。模型对象有两个属性： user 和 email。我们使用了 ng-show指令，color:red 在邮件是 $dirty 或 $invalid 才显示。

没用初始值的输入验证：注意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>

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>

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>

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>

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>

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,在路由与模板的学习过程中遇到了一些问题,于是今天给她写了个例子,顺便分享出来给那些正在学习AngularJS的小伙伴们. 话说这AngularJs 开发项目非常的爽,其中爽就爽在它的开发模式,使得代码更加的清晰.更加具有可读性.更简洁.更具有维护性.但是在使用AngularJS开发的过程中也有让我头疼的地方,那就是目前前端框架更多的还是以Jquery为主,很多插件都是依赖于Jquery的,AngulaJS的插件少之又少(除了AngularUI其他的Angula
AngularJS入门教程之AngularJS 模板

是时候给这些网页来点动态特性了--用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点.考虑到这一点,我们用AngularJS来为我们的应用添加一些模型.视图和控制器. 请重置工作目录: git checkout -f step-2 我们的应用现在有了一个包含三部手机的列表. 步骤1和步骤2之间最重要的不同在下面列出.,你可以到GitHub去看完整的差别. 视图
AngularJS模板加载用法详解

本文实例讲述了AngularJS模板加载用法.分享给大家供大家参考,具体如下: angular模板加载 ----ng-template AngularJS作为mvc(或者说mvvm)框架,同样具备模板这一基本概念. NG加载模板的顺序为内存加载---AJAX加载. 内存加载如果之前使用过Bootstrap 插件的ng版,即angular-ui,就会了解到这种方式的具体应用.模板本质上是字符串,把字符串直接写入内存,加载时直接从内存获取,速度会更快,有两种方式显式启用内存加载. 通过使用 $t
AngularJS指令用法详解

本文实例讲述了AngularJS指令用法.分享给大家供大家参考,具体如下: 指令(directives)是任何AngularJS应用中最重要的成分.尽管AngularJS已经自带了很多指令,你经常会发现需要自己亲手创建一些特别的指令.本文将会带你了解自定义指令并解释如何在现实世界中的Angular项目中使用它们.文章的最后,我们将一起用Angular指令来创建一个简单的笔记小应用. 综述一个指令就是一个引入新语法的东西.指令是在DOM元素上做的标记,并同时附加了一些特定的行为.例如,静态的HT
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】

本文实例讲述了AngularJS验证信息框架的封装插件用法.分享给大家供大家参考,具体如下: AngularJS 的表单验证规则 angular.js 的表单验证规则有 required(必填项),type="number"(必须为数字),type="email"(必须为邮箱地址),ng-max(最大值),ng-min(最小值),ng-max-length(最大长度),ng-min-length(最小长度),ng-pattern(正则验证)等等,而且angular写
AngularJS入门教程（一）：静态模板

为了说明angularJS如何增强了标准HTML,我们先将创建一个静态HTML页面模板,然后把这个静态HTML页面模板转换成能动态显示的AngularJS模板. 在本步骤中,我们往HTML页面中添加两个手机的基本信息,用以下命令将工作目录重置到步骤1. 复制代码代码如下: git checkout -f step-1 请编辑app/index.html文件,将下面的代码添加到index.html文件中,然后运行该应用查看效果. app/index.html 复制代码代码如下: <ul>
AngularJS入门教程（二）：AngularJS模板

是时候给这些网页来点动态特性了--用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点.考虑到这一点,我们用AngularJS来为我们的应用添加一些模型.视图和控制器. 请重置工作目录: 复制代码代码如下: git checkout -f step-2 我们的应用现在有了一个包含三部手机的列表. 步骤1和步骤2之间最重要的不同在下面列出.你可以到GitHub去
AngularJS初始化静态模板详解

AngularJS可以通过ng-app来自动初始化模块,也可以通过angular.bootstrap(document, [module])手动启动应用,不管用哪种方法,应用启动后,动态往dom树里面添加的dom元素,无法执行angular指令,即无法通过ng-model.ng-click给动态添加的dom元素绑定数据和事件,怎么办? 动态添加dom元素的场景非常常见,如点击某页面上修改用户资料的按钮,发送ajax请求去查询用户资料,然后通过模板引擎将事先写在页面里的静态模板编译成HTML字符串
AngularJS入门教程之链接与图片模板详解

这一步,你会为手机列表的手机添加缩略图以及一些链接,不过这些链接还不会起作用.接下来你会使用这些链接来分类显示手机的额外信息. 请重置工作目录: git checkout -f step-6 现在你应该能够看到列表里面手机的图片和链接了. 步骤5和步骤6之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 数据注意到现在phones.json文件包含了唯一标识符和每一部手机的图像链接.这些url现在指向app/img/phones/目录. app/phones/phones.js
AngularJs入门教程之环境搭建+创建应用示例

本文简单讲述了AngularJs环境搭建+创建应用的方法.分享给大家供大家参考,具体如下: 概述 AngularJS是Google工程师研发的一款JS框架,官方文档中对它的描述是,它是完全使用JavaScript编写的客户端技术,同其他历史悠久的Web技术(HTML,CSS等)配合使用,使得Web开发变得更简单.更高效.它是笔者用过的比较有特色的一款框架,以HTML作为模版语言并扩展HTML属性,使得应用组件开发保持高度的清晰和一致.本系列文章將以实际的案例简单的介绍AngularJs的特性和用
AngularJS入门教程之更多模板详解

在这一步,你将实现手机详细信息视图,这个视图会在用户点击手机列表中的一部手机时被显示出来. 请重置工作目录: git checkout -f step-8 现在当你点击列表中的一部手机之后,这部手机的详细信息页面就会被显示出来. 为了实现手机详细信息视图我们将会使用$http来获取数据,同时我们也要增添一个phone-detail.html视图模板. 步骤7和步骤8之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 数据除了phones.json,app/phones/目录也包
AngularJS入门教程之静态模板详解

为了说明angularJS如何增强了标准HTML,我们先将创建一个静态HTML页面模板,然后把这个静态HTML页面模板转换成能动态显示的AngularJS模板. 在本步骤中,我们往HTML页面中添加两个手机的基本信息,用以下命令将工作目录重置到步骤1. git checkout -f step-1 请编辑app/index.html文件,将下面的代码添加到index.html文件中,然后运行该应用查看效果. app/index.html <ul> <li> <span>

AngularJS表单和输入验证实例

相关推荐

随机推荐