AngularJS表单和输入验证实例-PHP开发-PHP中文网

首页

php教程

PHP开发

AngularJS表单和输入验证实例

高洛峰

Dec 08, 2016 am 10:14 AM

angularjs

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(&#39;myApp&#39;, []);
app.controller(&#39;formCtrl&#39;, 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(&#39;myApp&#39;, []);
app.controller(&#39;validateCtrl&#39;, function($scope) {
  $scope.user = &#39;John Doe&#39;;
  $scope.email = &#39;john.doe@gmail.com&#39;;
});
</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=&#39;TestFormModule&#39;>
  <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:&#39;&#39;
      };
      $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, &#39;error&#39;: 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=&#39;my-class&#39;">
    <input id="clearbtn" type="button" value="clear" ng-click="myVar=&#39;&#39;">
    <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>

登录后复制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7461

CakePHP 教程

1376

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

2022年最新5款的angularjs教程从入门到精通 Jun 15, 2017 pm 05:50 PM

Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。

使用PHP和AngularJS搭建一个响应式网站，提供优质的用户体验 Jun 27, 2023 pm 07:37 PM

在如今信息时代，网站已经成为人们获取信息和交流的重要工具。一个响应式的网站能够适应各种设备，为用户提供优质的体验，成为了现代网站开发的热点。本篇文章将介绍如何使用PHP和AngularJS搭建一个响应式网站，从而提供优质的用户体验。PHP介绍PHP是一种开源的服务器端编程语言，非常适用于Web开发。PHP具有很多优点，如易于学习、跨平台、丰富的工具库、开发效

使用PHP和AngularJS构建Web应用 May 27, 2023 pm 08:10 PM

随着互联网的不断发展，Web应用已成为企业信息化建设的重要组成部分，也是现代化工作的必要手段。为了使Web应用能够便于开发、维护和扩展，开发人员需要选择适合自己开发需求的技术框架和编程语言。PHP和AngularJS是两种非常流行的Web开发技术，它们分别是服务器端和客户端的解决方案，通过结合使用可以大大提高Web应用的开发效率和使用体验。PHP的优势PHP

如何使用PHP和AngularJS进行前端开发 May 11, 2023 pm 05:18 PM

随着互联网的普及和发展，前端开发已变得越来越重要。作为前端开发人员，我们需要了解并掌握各种开发工具和技术。其中，PHP和AngularJS是两种非常有用和流行的工具。在本文中，我们将介绍如何使用这两种工具进行前端开发。一、PHP介绍PHP是一种流行的开源服务器端脚本语言，它适用于Web开发，可以在Web服务器和各种操作系统上运行。PHP的优点是简单、快速、便

如何在PHP编程中使用AngularJS？ Jun 12, 2023 am 09:40 AM

随着Web应用程序的普及，前端框架AngularJS变得越来越受欢迎。AngularJS是一个由Google开发的JavaScript框架，它可以帮助你构建具有动态Web应用程序功能的Web应用程序。另一方面，对于后端编程，PHP是非常受欢迎的编程语言。如果您正在使用PHP进行服务器端编程，那么结合AngularJS使用PHP将可以为您的网站带来更多的动态效

使用Flask和AngularJS构建单页Web应用程序 Jun 17, 2023 am 08:49 AM

随着Web技术的飞速发展，单页Web应用程序（SinglePageApplication,SPA）已经成为一种越来越流行的Web应用程序模型。相比于传统的多页Web应用程序，SPA的最大优势在于用户感受更加流畅，同时服务器端的计算压力也大幅减少。在本文中，我们将介绍如何使用Flask和AngularJS构建一个简单的SPA。Flask是一款轻量级的Py

使用PHP和AngularJS开发一个在线文件管理平台，方便文件管理 Jun 27, 2023 pm 01:34 PM

随着互联网的普及，越来越多的人在使用网络进行文件传输和共享。然而，由于各种原因，使用传统的FTP等方式进行文件管理无法满足现代用户的需求。因此，建立一个易用、高效、安全的在线文件管理平台已成为了一种趋势。本文介绍的在线文件管理平台，基于PHP和AngularJS，能够方便地进行文件上传、下载、编辑、删除等操作，并且提供了一系列强大的功能，例如文件共享、搜索、

AngularJS基础入门介绍 Apr 21, 2018 am 10:37 AM

这篇文章介绍的内容是关于AngularJS基础入门介绍，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下。

See all articles

AngularJS表单和输入验证实例

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题