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>
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
