Angular form 유효성 검사 예제에 대한 자세한 설명
- 高洛峰원래의
- 2016-12-09 14:53:401152검색
양식 확인
가겠습니다. 제가 정말 멍청한 사람인 것 같습니다. 항상 단어 철자를 틀리거나 틀리는 바람에 시간을 많이 낭비하는데, 이건 정말 안 됩니다. 아니요, 이 문제를 올바르게 처리해야 합니다. 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>끝입니다. 성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.