Home > Article > Web Front-end > Introduction to using AngularJS to complete form validation function

Introduction to using AngularJS to complete form validation function

巴扎黑Original: 2017-08-14 13:52:311175browse

This article mainly introduces the form verification function based on AngularJS in detail. It has certain reference value. Interested friends can refer to it.

The example in this article shares with you the implementation of form verification in AngularJS. The specific code of the function is for your reference. The specific content is as follows

<!--实例解析

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>

The above is the detailed content of Introduction to using AngularJS to complete form validation function. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of how to obtain left and top values using JavaScript codeNext article：Detailed explanation of how to obtain left and top values using JavaScript code

See more

Introduction to using AngularJS to complete form validation function

Related articles