国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

基于AngularJS實現表單驗證功能

來源:懂視網 責編:小OO 時間:2020-11-27 22:33:58
文檔

基于AngularJS實現表單驗證功能

本文實例為大家分享了AngularJS實現表單驗證功能的具體代碼,供大家參考,具體內容如下:<。--實例解析ng-app 指令定義了 AngularJS 應用。ng-controller 指令定義了應用控制器。ng-model 指令綁定了兩個 input 元素到模型的 user 對象。formCtrl 函數設置了 master 對象的初始值,并定義了 reset() 方法。reset() 方法設置了 user 對象等于 master 對象。ng-click 指令調用了 reset() 方法,且在點擊按鈕時調用。novalidate 屬性在應用中不是必須的,但是你需要在 AngularJS 表單中使用,用于重寫標準的 HTML5 驗證。-->;<
推薦度:
導讀本文實例為大家分享了AngularJS實現表單驗證功能的具體代碼,供大家參考,具體內容如下:<。--實例解析ng-app 指令定義了 AngularJS 應用。ng-controller 指令定義了應用控制器。ng-model 指令綁定了兩個 input 元素到模型的 user 對象。formCtrl 函數設置了 master 對象的初始值,并定義了 reset() 方法。reset() 方法設置了 user 對象等于 master 對象。ng-click 指令調用了 reset() 方法,且在點擊按鈕時調用。novalidate 屬性在應用中不是必須的,但是你需要在 AngularJS 表單中使用,用于重寫標準的 HTML5 驗證。-->;<

本文實例為大家分享了AngularJS實現表單驗證功能的具體代碼,供大家參考,具體內容如下

<!--實例解析

ng-app 指令定義了 AngularJS 應用。

ng-controller 指令定義了應用控制器。

ng-model 指令綁定了兩個 input 元素到模型的 user 對象。

formCtrl 函數設置了 master 對象的初始值,并定義了 reset() 方法。

reset() 方法設置了 user 對象等于 master 對象。

ng-click 指令調用了 reset() 方法,且在點擊按鈕時調用。

novalidate 屬性在應用中不是必須的,但是你需要在 AngularJS 表單中使用,用于重寫標準的 HTML5 驗證。 -->
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<script src="js/angular.js"></script>
</head>
<body>
<!-- Checkbox(單選框)
我們可以使用 ng-model 來綁定單選按鈕到你的應用中。
單選框使用同一個 ng-model ,可以有不同的值,但只有被選中的單選按鈕的值會被使用
-->
<form>
 選擇一個選項:
 <input type="radio" ng-model="myVar" value="dogs">Dogs
 <input type="radio" ng-model="myVar" value="tuts">Tutorials
 <input type="radio" ng-model="myVar" value="cars">Cars
</form>
<div ng-switch="myVar">
 <div ng-switch-when="dogs">
 <h1>Dogs</h1>
 <p>Welcome to a world of dogs.</p>
 </div>
 <div ng-switch-when="tuts">
 <h1>Tutorials</h1>
 <p>Learn from examples.</p>
 </div>
 <div ng-switch-when="cars">
 <h1>Cars</h1>
 <p>Read about cars.</p>
 </div>
</div>
<p>ng-switch 指令根據單選按鈕的選擇結果顯示或隱藏 HTML 區域。</p><br><br><br><br>

<!-- 下拉菜單
使用 ng-model 指令可以將下拉菜單綁定到你的應用中。
ng-model 屬性的值為你在下拉菜單選中的選項
-->
<form>
 選擇一個選項:
 <select ng-model="myVar2">
 <option value="">
 <option value="dogs">Dogs
 <option value="tuts">Tutorials
 <option value="cars">Cars
 </select>
</form>
<div ng-switch="myVar2">
 <div ng-switch-when="dogs">
 <h1>Dogs</h1>
 <p>Welcome to a world of dogs.</p>
 </div>
 <div ng-switch-when="tuts">
 <h1>Tutorials</h1>
 <p>Learn from examples.</p>
 </div>
 <div ng-switch-when="cars">
 <h1>Cars</h1>
 <p>Read about cars.</p>
 </div>
</div>
<p>ng-switch 指令根據下拉菜單的選擇結果顯示或隱藏 HTML 區域。</p><br><br><br><br>

<!-- novalidate-->
<form action="xxx.do" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
<p><strong>注意:</strong>在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 屬性。這個屬性可以關閉瀏覽器默認校驗</p><br><br><br><br>


<!--Checkbox(復選框)
checkbox 的值為 true 或 false,可以使用 ng-model 指令綁定,它的值可以用于應用中-->
<div ng-app="">
 <form>
 選中復選框,顯示標題:
 <input type="checkbox" ng-model="myVar">
 </form>
 <h1 ng-show="myVar">My Header</h1>
</div>
<p>標題使用了 ng-show 指令,復選框選中后顯示 h1 標簽內容。</p><br><br><br><br>

<!-- HTML 表單
HTML 表單通常與 HTML 控件同時存在
以下 HTML input 元素被稱為 HTML 控件:

 input 元素
 select 元素
 button 元素
 textarea 元素
-->
<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>

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

基于AngularJS實現表單驗證功能

本文實例為大家分享了AngularJS實現表單驗證功能的具體代碼,供大家參考,具體內容如下:<。--實例解析ng-app 指令定義了 AngularJS 應用。ng-controller 指令定義了應用控制器。ng-model 指令綁定了兩個 input 元素到模型的 user 對象。formCtrl 函數設置了 master 對象的初始值,并定義了 reset() 方法。reset() 方法設置了 user 對象等于 master 對象。ng-click 指令調用了 reset() 方法,且在點擊按鈕時調用。novalidate 屬性在應用中不是必須的,但是你需要在 AngularJS 表單中使用,用于重寫標準的 HTML5 驗證。-->;<
推薦度:
標簽: 功能 驗證 進行
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 久久久久国产成人精品亚洲午夜 | 欧美一区二区视频 | 日韩啪 | 成人免费一级毛片在线播放视频 | 日本一区二区三区免费在线观看 | 伊人情人综合成人久久网小说 | 一道精品一区二区三区 | 精品久久久久久综合网 | 久久精品123 | 亚洲国产天堂久久九九九 | 欧美一级专区免费大片 | 美女一级毛片视频 | 日韩欧美亚州 | 可以免费看的毛片 | 国产精品久久久久久一区二区 | 成人a免费视频播放 | 亚洲欧美一区二区三区久久 | 在线精品福利 | 欧美亚洲网 | 日本aⅴ精品一区二区三区久久 | 久久国产成人精品国产成人亚洲 | 国产福利视精品永久免费 | 亚洲综合欧美日韩 | 国产精品免费播放 | 欧美高清一区二区三 | 免费精品在线观看 | 精品久久一 | 亚洲国产精品综合久久一线 | 国产成人h福利小视频在线观看 | 精品国产乱码久久久久久浪潮 | 亚洲国产成人精品久久 | 国产精品成人免费 | 欧美专区日韩专区 | 精品国产高清a毛片无毒不卡 | 日韩欧美在线观看视频 | 亚洲精品成人久久久影院 | 手机看片日韩欧美 | 亚洲欧洲日产国码一级毛片 | 中文字幕日韩一区二区三区不卡 | 91福利国产在线观一区二区 | 日韩视频一区二区 |