목차
验证实例
php教程 PHP开发 Angular form 유효성 검사 예제에 대한 자세한 설명

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

Dec 09, 2016 pm 02:53 PM
angular

양식 확인

가겠습니다. 제가 정말 멍청한 사람인 것 같습니다. 항상 단어 철자를 틀리거나 틀리는 바람에 시간을 많이 낭비하는데, 이건 정말 안 됩니다. 아니요, 이 문제를 올바르게 처리해야 합니다. 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 id="验证实例">验证实例</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>
로그인 후 복사
끝입니다.

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Angular의 메타데이터와 데코레이터에 대해 이야기해 보겠습니다. Angular의 메타데이터와 데코레이터에 대해 이야기해 보겠습니다. Feb 28, 2022 am 11:10 AM

Angular의 메타데이터와 데코레이터에 대해 이야기해 보겠습니다.

Ubuntu 24.04에 Angular를 설치하는 방법 Ubuntu 24.04에 Angular를 설치하는 방법 Mar 23, 2024 pm 12:20 PM

Ubuntu 24.04에 Angular를 설치하는 방법

각도 학습 상태 관리자 NgRx에 대한 자세한 설명 각도 학습 상태 관리자 NgRx에 대한 자세한 설명 May 25, 2022 am 11:01 AM

각도 학습 상태 관리자 NgRx에 대한 자세한 설명

각도에서 monaco-editor를 사용하는 방법에 대한 간략한 분석 각도에서 monaco-editor를 사용하는 방법에 대한 간략한 분석 Oct 17, 2022 pm 08:04 PM

각도에서 monaco-editor를 사용하는 방법에 대한 간략한 분석

Angular의 서버 측 렌더링(SSR)을 탐색하는 기사 Angular의 서버 측 렌더링(SSR)을 탐색하는 기사 Dec 27, 2022 pm 07:24 PM

Angular의 서버 측 렌더링(SSR)을 탐색하는 기사

프로젝트가 너무 크면 어떻게 해야 하나요? Angular 프로젝트를 합리적으로 분할하는 방법은 무엇입니까? 프로젝트가 너무 크면 어떻게 해야 하나요? Angular 프로젝트를 합리적으로 분할하는 방법은 무엇입니까? Jul 26, 2022 pm 07:18 PM

프로젝트가 너무 크면 어떻게 해야 하나요? Angular 프로젝트를 합리적으로 분할하는 방법은 무엇입니까?

Angular + NG-ZORRO로 백엔드 시스템을 빠르게 개발 Angular + NG-ZORRO로 백엔드 시스템을 빠르게 개발 Apr 21, 2022 am 10:45 AM

Angular + NG-ZORRO로 백엔드 시스템을 빠르게 개발

각도-날짜/시간 선택기 형식을 사용자 정의하는 방법에 대해 이야기해 보겠습니다. 각도-날짜/시간 선택기 형식을 사용자 정의하는 방법에 대해 이야기해 보겠습니다. Sep 08, 2022 pm 08:29 PM

각도-날짜/시간 선택기 형식을 사용자 정의하는 방법에 대해 이야기해 보겠습니다.

See all articles