当前位置：首页 > 资讯 > 技术文档

AngularJS实现表单验证功能详解

时间：2022-01-19 08:50 编辑：来源：阅读：
扫一扫，手机访问

摘要：AngularJS实现表单验证功能详解

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：AngularJS 2.0入门权威指南
下一篇：Jquery插件easyUi实现表单验证示例

资讯排行榜
更多>>