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

验证实例

집

php教程

PHP开发

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으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

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

SublimeText3 중국어 버전

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

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

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

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7675

Cakephp 튜토리얼

1393

C# 튜토리얼

1207

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

Related knowledge

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

이 글은 Angular에 대한 학습을 계속하고, Angular의 메타데이터와 데코레이터를 이해하고, 그 사용법을 간략하게 이해하는 데 도움이 되기를 바랍니다.

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

Angular.js는 동적 애플리케이션을 만들기 위해 자유롭게 액세스할 수 있는 JavaScript 플랫폼입니다. HTML 구문을 템플릿 언어로 확장하여 애플리케이션의 다양한 측면을 빠르고 명확하게 표현할 수 있습니다. Angular.js는 코드를 작성, 업데이트 및 테스트하는 데 도움이 되는 다양한 도구를 제공합니다. 또한 라우팅 및 양식 관리와 같은 많은 기능을 제공합니다. 이 가이드에서는 Ubuntu24에 Angular를 설치하는 방법에 대해 설명합니다. 먼저 Node.js를 설치해야 합니다. Node.js는 서버 측에서 JavaScript 코드를 실행할 수 있게 해주는 ChromeV8 엔진 기반의 JavaScript 실행 환경입니다. Ub에 있으려면

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

이 글은 Angular의 상태 관리자 NgRx에 대한 심층적인 이해를 제공하고 NgRx 사용 방법을 소개하는 글이 될 것입니다.

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

앵귤러 유니버셜(Angular Universal)을 아시나요? 웹사이트가 더 나은 SEO 지원을 제공하는 데 도움이 될 수 있습니다!

프론트엔드 개발에 PHP와 Angular를 사용하는 방법 May 11, 2023 pm 04:04 PM

인터넷의 급속한 발전과 함께 프론트엔드 개발 기술도 지속적으로 개선되고 반복되고 있습니다. PHP와 Angular는 프런트엔드 개발에 널리 사용되는 두 가지 기술입니다. PHP는 양식 처리, 동적 페이지 생성, 액세스 권한 관리와 같은 작업을 처리할 수 있는 서버측 스크립팅 언어입니다. Angular는 단일 페이지 애플리케이션을 개발하고 구성 요소화된 웹 애플리케이션을 구축하는 데 사용할 수 있는 JavaScript 프레임워크입니다. 이 기사에서는 프론트엔드 개발에 PHP와 Angular를 사용하는 방법과 이들을 결합하는 방법을 소개합니다.