Angular form 유효성 검사 예제에 대한 자세한 설명-PHP开发-php.cn

Angular form 유효성 검사 예제에 대한 자세한 설명

高洛峰

풀어 주다： 2016-12-09 14:53:40

원래의

1094명이 탐색했습니다.

양식 확인

가겠습니다. 제가 정말 멍청한 사람인 것 같습니다. 항상 단어 철자를 틀리거나 틀리는 바람에 시간을 많이 낭비하는데, 이건 정말 안 됩니다. 아니요, 이 문제를 올바르게 처리해야 합니다. Angular에는 minlength, maxlength 및 필수와 같은 형식 유효성 검사도 지원됩니다. 번호, URL 등을 확인해야 합니다. 그러면 스타일을 정의하면 됩니다. 그러면 어떻게 확인해야 할까요?

<!DOCTYPE html>
<html ng-app=&#39;app&#39;>
<head>
<meta charset=&#39;UTF-8&#39;>
<title>form1</title>
<link rel="stylesheet" type="text/css" href="static/plugins/bootstrap.min.css">
<script type="text/javascript" src=&#39;static/plugins/angular.min.js&#39;></script>
<script type="text/javascript" src=&#39;static/plugins/angular-messages.js&#39;></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=&#39;email&#39;>正确的邮箱格式</div>
</div>
</form>
</div>
</body>
<script type="text/javascript">
angular.module("app", [&#39;ngMessages&#39;]);
</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(&#39;myApp&#39;, [])
.directive(&#39;ensureUnique&#39;, [&#39;$http&#39;, function($http) {
return {
require: &#39;ngModel&#39;,
link: function(scope, ele, attrs, c) {
scope.$watch(attrs.ngModel, function() {
$http({
method: &#39;POST&#39;,
url: &#39;/api/check/&#39; + attrs.ensureUnique,
data: {&#39;field&#39;: attrs.ensureUnique}
}).success(function(data, status, headers, cfg) {
c.$setValidity(&#39;unique&#39;, data.isUnique);
}).error(function(data, status, headers, cfg) {
c.$setValidity(&#39;unique&#39;, false);
});
});
}
};
}]);

로그인 후 복사

<🎜입니다. >

html, js 2단계로 커스텀 검증이 완료되는거 보셨나요? 아무튼 Custom Validation 작성법을 알려드리기 위해 이 두 코드를 올렸습니다 ㅎㅎ

글쎄요, angler에도 Form Validation 속성이 있는데 어쨌든 Form만 올려주시면 깔끔해집니다. 한눈에 다 나와있어요 Cainiao.com에서 검색하시면 됩니다

Angular form 유효성 검사 예제에 대한 자세한 설명

그럼 사용방법은 이렇습니다

<!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(&#39;myApp&#39;, []);
app.controller(&#39;validateCtrl&#39;, function($scope) {
$scope.user = &#39;John Doe&#39;;
$scope.email = &#39;john.doe@gmail.com&#39;;
});
</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=&#39;app&#39;>
<head>
<meta charset=&#39;UTF-8&#39;>
<title>form1</title>
<link rel="stylesheet" type="text/css" href="static/plugins/bootstrap.min.css">
<script type="text/javascript" src=&#39;static/plugins/angular.min.js&#39;></script>
<script type="text/javascript" src=&#39;static/plugins/angular-messages.js&#39;></script>
</head>
<body ng-controller=&#39;ctrl&#39;>
<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=&#39;email&#39;>正确的邮箱格式</div>
</div>
名字 <input type=&#39;text&#39; name=&#39;name1&#39; ng-model=&#39;name1&#39; required>
<span style=&#39;color:red&#39; ng-show=&#39;myForm.name1.$dirty&#39;>
<span ng-show=&#39;myForm.name1.$error.required&#39;>名字是必须的</span>
</span>
</form>
</div>
</body>
<script type="text/javascript">
var app=angular.module("app", [&#39;ngMessages&#39;]);
app.controller(&#39;ctrl&#39;,function($scope){
$scope.name1=&#39;wenwen&#39;;
})
</script>
</html>

로그인 후 복사

끝입니다.