suchen

Heim  >  Artikel  >  Web-Frontend  >  Einführung in die Verwendung von AngularJS zur Vervollständigung der Formularvalidierungsfunktion

Einführung in die Verwendung von AngularJS zur Vervollständigung der Formularvalidierungsfunktion

巴扎黑
巴扎黑Original
2017-08-14 13:52:311221Durchsuche

In diesem Artikel wird hauptsächlich die auf AngularJS basierende Formularüberprüfungsfunktion ausführlich vorgestellt. Interessierte Freunde können sich darauf beziehen.

Das Beispiel in diesem Artikel zeigt Ihnen die Implementierung der Formularüberprüfung in AngularJS . Der spezifische Code der Funktion dient als Referenz. Der spezifische Inhalt lautet wie folgt: 


<!--实例解析

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>
<p ng-switch="myVar">
 <p ng-switch-when="dogs">
   <h1>Dogs</h1>
   <p>Welcome to a world of dogs.</p>
 </p>
 <p ng-switch-when="tuts">
   <h1>Tutorials</h1>
   <p>Learn from examples.</p>
 </p>
 <p ng-switch-when="cars">
   <h1>Cars</h1>
   <p>Read about cars.</p>
 </p>
</p>
<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>
<p ng-switch="myVar2">
 <p ng-switch-when="dogs">
   <h1>Dogs</h1>
   <p>Welcome to a world of dogs.</p>
 </p>
 <p ng-switch-when="tuts">
   <h1>Tutorials</h1>
   <p>Learn from examples.</p>
 </p>
 <p ng-switch-when="cars">
   <h1>Cars</h1>
   <p>Read about cars.</p>
 </p>
</p>
<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 指令绑定，它的值可以用于应用中-->
<p ng-app="">
 <form>
  选中复选框，显示标题:
  <input type="checkbox" ng-model="myVar">
 </form>
 <h1 ng-show="myVar">My Header</h1>
</p>
<p>标题使用了 ng-show 指令，复选框选中后显示 h1 标签内容。</p><br><br><br><br>

<!-- HTML 表单
HTML 表单通常与 HTML 控件同时存在
以下 HTML input 元素被称为 HTML 控件:

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

<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>

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von AngularJS zur Vervollständigung der Formularvalidierungsfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ausführliche Erklärung, wie man mithilfe von JavaScript-Code linke und obere Werte erhältNächster Artikel：Ausführliche Erklärung, wie man mithilfe von JavaScript-Code linke und obere Werte erhält

In Verbindung stehende Artikel

Mehr sehen