angularjs表单验证

本文介绍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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值