angularjs表单验证

最新推荐文章于 2019-02-25 14:33:00 发布

chengzhang_jian

最新推荐文章于 2019-02-25 14:33:00 发布

阅读量375

点赞数 1

CC 4.0 BY-SA版权

分类专栏： angularjs 文章标签： angularjs 表单

本文链接：https://blog.youkuaiyun.com/chengzhang_jian/article/details/78209748

angularjs 专栏收录该内容

11 篇文章

订阅专栏

本文介绍Angular中表单验证的方法，包括使用ng-valid等属性进行状态判断，以及利用$invalid等对象进行具体验证的过程。通过案例展示了如何实现基本的表单验证逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在ng中，针对表单和空间提供了属性，用于验证控件交互的状态
布尔类型：
ng-valid 表单通过验证时设置
ng-invalid 表单未通过验证时设置
ng-pristine 表单没有改动时设置
ng-dirty 表单有改动时设置
对象：
$error

注意事项：
①给表单以及表单组件加上name属性
②给需要用到的表单组件，加上ngModel
③属性的用法
myForm.t_age. $dirty/$ pristine/ $valid/$ invalid/$error
案例如下

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="js/angular.js"></script>
</head>
<body>

<div ng-controller="myCtrl">
  <form name="myForm" ng-submit="submitInfo()">
    <input type="text" name="t_name"
           ng-model="userName" required/>
    <span ng-show="myForm.t_name.$error.required">
      姓名不能为空
    </span>
    <br/>
    <input type="text" name="t_age"
           ng-model="userAge" required/>
    <span ng-show="myForm.t_age.$invalid">验证失败</span>
    <span ng-show="myForm.t_age.$pristine">没有输入过</span>

    <br/>
    <input
      ng-disabled="myForm.$invalid"
      type="submit" value="提交"/>
  </form>
</div>

<script>
  var app = angular.module('myApp', ['ng']);

  app.controller('myCtrl', function ($scope) {
    $scope.submitInfo = function () {
      console.log($scope.userName,$scope.userAge);
    }
  });
</script>
</body>
</html>