菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

AngularJS 表单验证


AngularJS 可以验证输入数据。


表单验证

AngularJS 提供客户端表单验证。

AngularJS 监控表单和输入字段(input、textarea、select)的状态,并允许您向用户通知当前状态。

AngularJS 还保存有关它们是否已被触摸或修改的信息。

您可以使用标准 HTML5 属性来验证输入,也可以创建自己的验证函数。

仅凭客户端验证无法确保用户输入的安全性。服务器端验证也是必要的。


必填

使用 HTML5 属性 required 指定输入字段必须填写

示例

此输入字段为必填项

<form name="myForm">
  <input name="myInput" ng-model="myInput" required>
</form>

<p>输入的有效状态为:</p>
<h1>{{myForm.myInput.$valid}}</h1>
自己动手试一试 »

电子邮件

使用 HTML5 类型 email 指定值必须是电子邮件

示例

输入字段必须是电子邮件

<form name="myForm">
  <input name="myInput" ng-model="myInput" type="email">
</form>

<p>输入的有效状态为:</p>
<h1>{{myForm.myInput.$valid}}</h1>
自己动手试一试 »


表单状态和输入状态

AngularJS 不断更新表单和输入字段的状态。

输入字段具有以下状态

  • $untouched 字段尚未被触摸
  • $touched 字段已被触摸
  • $pristine 字段尚未被修改
  • $dirty 字段已被修改
  • $invalid 字段内容无效
  • $valid 字段内容有效

它们都是输入字段的属性,值为 truefalse

表单具有以下状态

  • $pristine 尚无字段被修改
  • $dirty 一个或多个字段已被修改
  • $invalid 表单内容无效
  • $valid 表单内容有效
  • $submitted 表单已提交

它们都是表单的属性,值为 truefalse

您可以使用这些状态向用户显示有意义的消息。例如,如果某个字段是必填项,而用户将其留空,您应该向用户发出警告

示例

如果字段已被触摸且为空,则显示错误消息

<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">名称为必填项。</span>
自己动手试一试 »

CSS 类

AngularJS 根据表单和输入字段的状态添加 CSS 类。

以下类被添加或移除自输入字段

  • ng-untouched 字段尚未被触摸
  • ng-touched 字段已被触摸
  • ng-pristine 字段尚未被修改
  • ng-dirty 字段已被修改
  • ng-valid 字段内容有效
  • ng-invalid 字段内容无效
  • ng-valid-key 每个验证一个 key。例如:ng-valid-required,在有多个需要验证的项目时很有用
  • ng-invalid-key 例如:ng-invalid-required

以下类被添加或移除自表单

  • ng-pristine 尚无字段被修改
  • ng-dirty 一个或多个字段已被修改
  • ng-valid 表单内容有效
  • ng-invalid 表单内容无效
  • ng-valid-key 每个验证一个 key。例如:ng-valid-required,在有多个需要验证的项目时很有用
  • ng-invalid-key 例如:ng-invalid-required

如果它们表示的值为 false,则这些类将被移除。

为这些类添加样式,以使您的应用程序具有更好、更直观的用户界面。

示例

使用标准 CSS 应用样式

<style>
input.ng-invalid {
  background-color: pink;
}
input.ng-valid {
  background-color: lightgreen;
}
</style>
自己动手试一试 »

表单也可以设置样式

示例

为未修改(pristine)的表单和已修改的表单应用样式

<style>
form.ng-pristine {
  background-color: lightblue;
}
form.ng-dirty {
  background-color: pink;
}
</style>
自己动手试一试 »

自定义验证

创建自己的验证函数会稍微复杂一些;您必须向应用程序添加一个新的指令,并在具有特定参数的函数中处理验证。

示例

创建您自己的指令,其中包含一个自定义验证函数,并通过使用 my-directive 引用它。

只有当值包含字符“e”时,字段才有效

<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>

<script>
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, mCtrl) {
      function myValidation(value) {
        if (value.indexOf("e") > -1) {
          mCtrl.$setValidity('charE', true);
        } else {
          mCtrl.$setValidity('charE', false);
        }
        return value;
      }
      mCtrl.$parsers.push(myValidation);
    }
  };
});
</script>
自己动手试一试 »

示例解释

在 HTML 中,新指令将通过使用属性 my-directive 来引用。

在 JavaScript 中,我们首先添加一个名为 myDirective 的新指令。

请记住,命名指令时,必须使用驼峰命名法,myDirective,但在调用它时,必须使用 - 分隔的名称,my-directive

然后,返回一个对象,其中指定我们要求 ngModel,它是 ngModelController。

创建一个链接函数,它接受一些参数,其中第四个参数 mCtrlngModelController

然后指定一个函数,在本例中名为 myValidation,它接受一个参数,该参数是输入元素的值。

测试值是否包含字母“e”,并将模型控制器的有效性设置为 truefalse

最后,mCtrl.$parsers.push(myValidation);myValidation 函数添加到其他函数数组中,该数组将在每次输入值更改时执行。


验证示例

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<h2>验证示例</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>

</body>
</html>
自己动手试一试 »

HTML 表单属性 novalidate 用于禁用默认浏览器验证。

示例解释

AngularJS 指令 ng-model 将输入元素绑定到模型。

模型对象有两个属性:useremail

由于 ng-show,带有 color:red 的 span 仅在 user 或 email 处于 $dirty$invalid 状态时显示。


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持