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="https://www.jb51.net/js/angular.js"></script> </head> <body> <div ng-controller="myCtrl"> <form ng-submit="submitInfo()"> <input type="text" ng-model="userName" required/> <span ng-show="myForm.t_name.$error.required"> 姓名不能为空 </span> <br/> <input type="text" 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>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wyzygf.html