AngularJS: 서버측 검증과의 통합
예를 들어 저장 버튼을 포함하는 각진 앱이 있습니다.
<button ng-click="save" ng-disabled="form.$invalid">SAVE</button>
이것은 클라이언트측 검증에 매우 적합합니다.form.$invalid사용자가 문제를 수정하면 false가 되지만 다른 사용자가 동일한 전자 메일로 등록되면 전자 메일 필드가 비활성화됩니다.
이메일 필드를 비활성화하면 양식을 제출할 수 없으며, 사용자는 해당 검증 오류를 수정할 수 없습니다.그래서 더 이상 사용할 수 없게 되었습니다.form.$invalid[ Submit ]버튼을 비활성화합니다.
더 좋은 방법이 있을 거야
이것은 커스텀 디렉티브가 친구일 경우의 또 다른 예입니다.디렉티브를 생성하여 검증 중에 서버에 콜백하기 위해 $http 또는 $리소스를 삽입합니다.
커스텀 디렉티브의 유사 코드:
app.directive('uniqueEmail', function($http) {
var toId;
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, elem, attr, ctrl) {
//when the scope changes, check the email.
scope.$watch(attr.ngModel, function(value) {
// if there was a previous attempt, stop it.
if(toId) clearTimeout(toId);
// start a new attempt with a delay to keep it from
// getting too "chatty".
toId = setTimeout(function(){
// call to some API that returns { isValid: true } or { isValid: false }
$http.get('/Is/My/EmailValid?email=' + value).success(function(data) {
//set the validity of the field
ctrl.$setValidity('uniqueEmail', data.isValid);
});
}, 200);
})
}
}
});
마크 업으로 사용하는 방법은 다음과 같습니다.
<input type="email" ng-model="userEmail" name="userEmail" required unique-email/>
<span ng-show="myFormName.userEmail.$error.uniqueEmail">Email is not unique.</span>
편집: 위의 상황에 대한 간단한 설명입니다.
- 입력값을 갱신하면 $scope.user Email이 갱신됩니다.
- 이 디렉티브에는 $scope.user Email에 $watch가 포함되어 있으며 링크 기능에 설정되어 있습니다.
- $watch가 트리거되면 $http ajax 호출을 통해 서버에 호출하여 이메일을 전달합니다.
- 서버는 이메일 주소를 확인하고 '{ isValid: true }'와 같은 간단한 응답을 반환합니다.
- 이 응답은 컨트롤의 $setValidity에 사용됩니다.
- uniqueEmail 유효 상태가 false일 때만 표시되도록 ng-show가 설정된 마크업에는 가 있습니다.
...사용자에게 전달되는 의미는 다음과 같습니다.
- 전자 메일을 입력합니다.
- 약간 멈칫하다.
- 이메일이 고유하지 않으면 "Email is not unique" 메시지가 "실시간"으로 표시됩니다.
EDIT2: 폼을 사용할 수도 있습니다.$120을 클릭하여 전송 버튼을 비활성화합니다.
몇 가지 프로젝트에서 이것이 필요했기 때문에 지시문을 작성했습니다.드디어 드롭인 솔루션을 원하는 사람을 위해 GitHub에 올렸습니다.
https://github.com/webadvanced/ng-remote-validate
특징:
텍스트 또는 비밀번호 입력에 대한 Ajax 검증을 위한 솔루션 폐기
Angulars와 연동하여 검증하고 formName.inputName에서 cab에 액세스합니다.$error.ngRemoteValidate
서버 요청을 조절합니다(기본값 400ms).
ng-remote-throttle="550"HTTP 메서드의 정의(디폴트 POST)를 허가합니다.
ng-remote-method="GET"
사용자가 현재 비밀번호와 새 비밀번호를 입력해야 하는 비밀번호 변경 폼의 사용 예:
<h3>Change password</h3>
<form name="changePasswordForm">
<label for="currentPassword">Current</label>
<input type="password"
name="currentPassword"
placeholder="Current password"
ng-model="password.current"
ng-remote-validate="/customer/validpassword"
required>
<span ng-show="changePasswordForm.currentPassword.$error.required && changePasswordForm.confirmPassword.$dirty">
Required
</span>
<span ng-show="changePasswordForm.currentPassword.$error.ngRemoteValidate">
Incorrect current password. Please enter your current account password.
</span>
<label for="newPassword">New</label>
<input type="password"
name="newPassword"
placeholder="New password"
ng-model="password.new"
required>
<label for="confirmPassword">Confirm</label>
<input ng-disabled=""
type="password"
name="confirmPassword"
placeholder="Confirm password"
ng-model="password.confirm"
ng-match="password.new"
required>
<span ng-show="changePasswordForm.confirmPassword.$error.match">
New and confirm do not match
</span>
<div>
<button type="submit"
ng-disabled="changePasswordForm.$invalid"
ng-click="changePassword(password.new, changePasswordForm);reset();">
Change password
</button>
</div>
</form>
나에게 딱 맞는 솔루션을 가진 plunker를 만들었습니다.사용자 지정 지시문을 사용하지만 단일 필드가 아닌 전체 형식으로 사용합니다.
http://plnkr.co/edit/HnF90JOYaz47r8zaH5JY
서버 검증의 송신 버튼을 무효로 하는 것은 추천하지 않습니다.
좋습니다. 작업 버전이 필요한 경우, 다음을 참조하십시오.
발신인:
$apply() is used to enter Angular execution context from JavaScript
(Keep in mind that in most places (controllers, services)
$apply has already been called for you by the directive which is handling the event.)
않다는 했다.$scope.$apply(function(s) { 않으면 $digest
app.directive('uniqueName', function($http) {
var toId;
return {
require: 'ngModel',
link: function(scope, elem, attr, ctrl) {
//when the scope changes, check the name.
scope.$watch(attr.ngModel, function(value) {
// if there was a previous attempt, stop it.
if(toId) clearTimeout(toId);
// start a new attempt with a delay to keep it from
// getting too "chatty".
toId = setTimeout(function(){
// call to some API that returns { isValid: true } or { isValid: false }
$http.get('/rest/isUerExist/' + value).success(function(data) {
//set the validity of the field
if (data == "true") {
ctrl.$setValidity('uniqueName', false);
} else if (data == "false") {
ctrl.$setValidity('uniqueName', true);
}
}).error(function(data, status, headers, config) {
console.log("something wrong")
});
}, 200);
})
}
}
});
HTML:
<div ng-controller="UniqueFormController">
<form name="uniqueNameForm" novalidate ng-submit="submitForm()">
<label name="name"></label>
<input type="text" ng-model="name" name="name" unique-name> <!-- 'unique-name' because of the name-convention -->
<span ng-show="uniqueNameForm.name.$error.uniqueName">Name is not unique.</span>
<input type="submit">
</form>
</div>
컨트롤러는 다음과 같습니다.
app.controller("UniqueFormController", function($scope) {
$scope.name = "Bob"
})
이 페이지에서 https://github.com/webadvanced/ng-remote-validate에 대해 학습한 답변 덕분에
각 필드에 지시문을 작성하기 위해 제가 별로 좋아하지 않는 옵션 지시문입니다.모듈은 동일하며 범용 솔루션입니다.
이치노 필드에 몇 가지 규칙이 있는지 확인하십시오.
그리고 모듈 https://github.com/borodatych/ngRemoteValidate을 수정했습니다.
README 러한에 。
갑자기 같은 문제를 안고 있는 사람이 있다는 것을 알려드립니다.
아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아...
로드:
<script type="text/javascript" src="../your/path/remoteValidate.js"></script>
내용:
var app = angular.module( 'myApp', [ 'remoteValidate' ] );
HTML
<input type="text" name="login"
ng-model="user.login"
remote-validate="( '/ajax/validation/login', ['not_empty',['min_length',2],['max_length',32],'domain','unique'] )"
required
/>
<br/>
<div class="form-input-valid" ng-show="form.login.$pristine || (form.login.$dirty && rv.login.$valid)">
From 2 to 16 characters (numbers, letters and hyphens)
</div>
<span class="form-input-valid error" ng-show="form.login.$error.remoteValidate">
<span ng:bind="form.login.$message"></span>
</span>
백엔드 [코하나]
public function action_validation(){
$field = $this->request->param('field');
$value = Arr::get($_POST,'value');
$rules = Arr::get($_POST,'rules',[]);
$aValid[$field] = $value;
$validation = Validation::factory($aValid);
foreach( $rules AS $rule ){
if( in_array($rule,['unique']) ){
/// Clients - Users Models
$validation = $validation->rule($field,$rule,[':field',':value','Clients']);
}
elseif( is_array($rule) ){ /// min_length, max_length
$validation = $validation->rule($field,$rule[0],[':value',$rule[1]]);
}
else{
$validation = $validation->rule($field,$rule);
}
}
$c = false;
try{
$c = $validation->check();
}
catch( Exception $e ){
$err = $e->getMessage();
Response::jEcho($err);
}
if( $c ){
$response = [
'isValid' => TRUE,
'message' => 'GOOD'
];
}
else{
$e = $validation->errors('validation');
$response = [
'isValid' => FALSE,
'message' => $e[$field]
];
}
Response::jEcho($response);
}
언급URL : https://stackoverflow.com/questions/12864887/angularjs-integrating-with-server-side-validation
'programing' 카테고리의 다른 글
| posts_search의 커스텀 (0) | 2023.03.20 |
|---|---|
| 사용자가 이미 Memberpress 제품을 구독한 경우 어떻게 탐지할 수 있습니까? (0) | 2023.03.20 |
| 응답으로 버튼을 클릭할 때 새 탭에서 페이지를 여는 방법나도 그 페이지로 데이터를 보내고 싶다. (0) | 2023.03.20 |
| 페이지 새로 고침 없이 양식 제출 (0) | 2023.03.20 |
| 반응 - useState 초기값이 설정되지 않음 (0) | 2023.03.20 |