angularjs表单验证

最新推荐文章于 2020-07-19 08:13:26 发布

chengzhang_jian

最新推荐文章于 2020-07-19 08:13:26 发布

阅读量313

点赞数 1

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

本文链接：https://blog.csdn.net/chengzhang_jian/article/details/78209748

版权

angularjs 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

chengzhang_jian

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs表单验证

在ng中，针对表单和空间提供了属性，用于验证控件交互的状态布尔类型： ng-valid 表单通过验证时设置 ng-invalid 表单未通过验证时设置 ng-pristine 表单没有改动时设置 ng-dirty 表单有改动时设置对象： $error注意事项： ①给表单以及表单组件加上name属性 ②给需要用到的表单组件，加上ngModel ③属性的用法 myFo
复制链接

扫一扫

专栏目录