AngularJS表单和输入验证实例

2019-11-20 08:36:32

字体：大中小

来源：转载

供稿：网友

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>