양식 확인
가겠습니다. 제가 정말 멍청한 사람인 것 같습니다. 항상 단어 철자를 틀리거나 틀리는 바람에 시간을 많이 낭비하는데, 이건 정말 안 됩니다. 아니요, 이 문제를 올바르게 처리해야 합니다. Angular에는 minlength, maxlength 및 필수와 같은 형식 유효성 검사도 지원됩니다. 번호, URL 등을 확인해야 합니다. 그러면 스타일을 정의하면 됩니다. 그러면 어떻게 확인해야 할까요?
<!DOCTYPE html> <html ng-app='app'> <head> <meta charset='UTF-8'> <title>form1</title> <link rel="stylesheet" type="text/css" href="static/plugins/bootstrap.min.css"> <script type="text/javascript" src='static/plugins/angular.min.js'></script> <script type="text/javascript" src='static/plugins/angular-messages.js'></script> </head> <body> <div class="col-md-6"> <form role="form" name="myForm" class="form-horizontal" novalidate> <label>用户名</label> <input type="email" placeholder="ng-Messages测试" name="name" ng-model="username.name" ng-minlength=3 ng-maxlength=20 required /> <div ng-messages="myForm.name.$error"> <div ng-message="required">必填项</div> <div ng-message="minlength">字符太短小于3</div> <div ng-message="maxlength">字符太长大于20</div> <div ng-message='email'>正确的邮箱格式</div> </div> </form> </div> </body> <script type="text/javascript"> angular.module("app", ['ngMessages']); </script> </html>
그렇습니다. 선언할 점이 몇 가지 있습니다.
첫 번째는 angle-messages.js를 소개하는 것이고,
두 번째는 메시지와 메시지를 명확하게 이해해야 한다는 것입니다. ,
세 번째 myForm.name.$error: 이 myForm은 양식의 이름 값이고, name은 검증할 입력의 이름 값입니다.
네 번째는 인증을 맞춤 설정할 수도 있다는 점입니다.
자, 아직 다섯번째 단어가 공개되지 않았는데요, 추가적으로 주의하실 점은 마스터님들께서 보시고 지적해주시면 됩니다.
맞춤 확인 방법에 대해 이야기해 보겠습니다. 코드는
<input type="text" placeholder="Desired username" name="username" ng-model="signup.username" ng-minlength=3 ng-maxlength=20 ensure-unique="username" required />
보시다시피, 이 verify-unique는 맞춤 확인입니다. , 이는 고유해야 합니다. 이것이 HTML로 작성되는 방법입니다. 여기에는 해당 코드가 있으며, 해당 코드는
angular.module('myApp', []) .directive('ensureUnique', ['$http', function($http) { return { require: 'ngModel', link: function(scope, ele, attrs, c) { scope.$watch(attrs.ngModel, function() { $http({ method: 'POST', url: '/api/check/' + attrs.ensureUnique, data: {'field': attrs.ensureUnique} }).success(function(data, status, headers, cfg) { c.$setValidity('unique', data.isUnique); }).error(function(data, status, headers, cfg) { c.$setValidity('unique', false); }); }); } }; }]);html, js 2단계로 커스텀 검증이 완료되는거 보셨나요? 아무튼 Custom Validation 작성법을 알려드리기 위해 이 두 코드를 올렸습니다 ㅎㅎ 글쎄요, angler에도 Form Validation 속성이 있는데 어쨌든 Form만 올려주시면 깔끔해집니다. 한눈에 다 나와있어요 Cainiao.com에서 검색하시면 됩니다
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <h2>验证实例</h2> <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate> <p>用户名:<br> <input type="text" name="user" ng-model="user" required> <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"> <span ng-show="myForm.user.$error.required">用户名是必须的。</span> </span> </p> <p>邮箱:<br> <input type="email" name="email" ng-model="email" required> <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid"> <span ng-show="myForm.email.$error.required">邮箱是必须的。</span> <span ng-show="myForm.email.$error.email">非法的邮箱地址。</span> </span> </p> <p> <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid"> </p> </form> <script> var app = angular.module('myApp', []); app.controller('validateCtrl', function($scope) { $scope.user = 'John Doe'; $scope.email = 'john.doe@gmail.com'; }); </script> </body> </html>사용법 요약, 1.angular.js 하나만 사용하면 다른 js를 소개할 필요가 없지만 단점은 더 이상 확인할 수 없습니다. 조건입니다. 헤헤, 그것은 당신의 필요에 달려 있습니다. 2. ng-show를 사용하여 표시합니다. myForm.user.$error.required는 여전히 위와 동일합니다. 필수는 필수이고 $dirty에 해당하므로....myForm.user.$dirty, ㅎㅎ 이 대표자의 의미는 어차피 모두 형태로 되어있습니다. 이런 종류의 확인 조건이 효과적이라고 생각합니다. 다시 말하지만, 이는 귀하의 필요에 따라 다릅니다. 3. 이 사용법에는 또 다른 문제가 있습니다. 예를 들어 필수 항목을 먼저 확인하려는 경우 처음에 입력 상자에 내용이 없으면 확인 메시지가 나타나지 않으므로 먼저 js에서 기본값을 지정해야 합니다. 이 효과는 좋지 않은 것 같습니다. 따라서 페이지에 $scope.user = 'John Doe';js가 먼저 그에게 값을 할당하는 것을 볼 수 있습니다. 4. 또 다른 질문이 있습니다. 먼저 값을 할당한 다음 컨트롤러를 가져와야 하고 컨트롤러를 정의해야 한다고 생각합니다. 더 나은. . 5. 또 다른 질문이 있습니다. ng-model을 각 입력에 바인딩해야 하며, 그렇지 않으면 모니터링하는 방법을 기억하세요. 개인적인 의견은 그리고 이 둘은 실제로 결합될 수도 있습니다. 그렇지 않다면 코드를 보시면 됩니다. 자, 코드를 살펴보겠습니다
<!DOCTYPE html> <html ng-app='app'> <head> <meta charset='UTF-8'> <title>form1</title> <link rel="stylesheet" type="text/css" href="static/plugins/bootstrap.min.css"> <script type="text/javascript" src='static/plugins/angular.min.js'></script> <script type="text/javascript" src='static/plugins/angular-messages.js'></script> </head> <body ng-controller='ctrl'> <div class="col-md-6"> <form role="form" name="myForm" class="form-horizontal" novalidate> <label>用户名</label> <input type="email" placeholder="ng-Messages测试" name="name" ng-model="username.name" ng-minlength=3 ng-maxlength=20 required /> <div ng-messages="myForm.name.$error"> <div ng-message="required">必填项</div> <div ng-message="minlength">字符太短小于3</div> <div ng-message="maxlength">字符太长大于20</div> <div ng-message='email'>正确的邮箱格式</div> </div> 名字 <input type='text' name='name1' ng-model='name1' required> <span style='color:red' ng-show='myForm.name1.$dirty'> <span ng-show='myForm.name1.$error.required'>名字是必须的</span> </span> </form> </div> </body> <script type="text/javascript"> var app=angular.module("app", ['ngMessages']); app.controller('ctrl',function($scope){ $scope.name1='wenwen'; }) </script> </html>끝입니다.