AngularJS如何实现表单验证功能

这篇文章将为大家详细讲解有关AngularJS如何实现表单验证功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

专注于为中小企业提供网站设计、成都做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业阿鲁科尔沁免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了成百上千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

js有什么特点

1、js属于一种解释性脚本语言；2、在绝大多数浏览器的支持下，js可以在多种平台下运行，拥有着跨平台特性；3、js属于一种弱类型脚本语言，对使用的数据类型未做出严格的要求，能够进行类型转换，简单又容易上手；4、js语言安全性高，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失；5、基于对象的脚本语言，js不仅可以创建对象，也能使用现有的对象。

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

关于“AngularJS如何实现表单验证功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

文章标题：AngularJS如何实现表单验证功能
网页路径：https://www.cdcxhl.com/article20/ijhojo.html

成都网站建设公司_创新互联，为您提供定制开发、外贸建站、响应式网站、、网站设计公司、ChatGPT

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容