AngularJS表单和输入验证

来源：互联网发布：win10 php 编辑：程序博客网时间：2024/04/27 20:01

1、AngularJS表单

AngularJS 表单是输入控件的集合。

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

实例解析ng-app 指令定义了 AngularJS 应用。ng-controller 指令定义了应用控制器。ng-model 指令绑定了两个 input 元素到模型的 user 对象。formCtrl 函数设置了 master 对象的初始值，并定义了 reset() 方法。reset() 方法设置了 user 对象等于 master 对象。ng-click 指令调用了 reset() 方法，且在点击按钮时调用。novalidate 属性在应用中不是必须的，但是你需要在 AngularJS 表单中使用，用于重写标准的 HTML5 验证。AngularJS 表单和控件可以验证输入的数据。

2、AngularJS 输入验证

AngularJS 表单和控件可以验证输入的数据。

<h2>Validation Example</h2><form  ng-app="myApp"  ng-controller="validateCtrl"name="myForm" novalidate><p>用户名:<br>  <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>邮箱:<br>  <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>

实例解析AngularJS ng-model 指令用于绑定输入元素到模型中。模型对象有两个属性： user 和 email。我们使用了 ng-show指令， color:red 在邮件是 $dirty 或 $invalid 才显示。

属性描述 $dirty 表单有填写记录 $valid 字段内容合法的 $invalid 字段内容是非法的 $pristine 表单没有填写记录

0 0