AngularJS : 서버 측 유효성 검사와 통합
예제에서 가져온 저장 버튼이 포함 된 각도 앱이 있습니다.
<button ng-click="save" ng-disabled="form.$invalid">SAVE</button>
이것은 form.$invalid사용자가 문제를 해결함에 따라 거짓이 되기 때문에 클라이언트 측 유효성 검사 에 적합하지만 다른 사용자가 동일한 이메일로 등록 된 경우 유효하지 않은 이메일 필드가 있습니다.
이메일 필드를 유효하지 않게 설정하자마자 양식을 제출할 수 없으며 사용자는 유효성 검사 오류를 수정할 방법이 없습니다. 이제 더 이상 form.$invalid제출 버튼을 비활성화 하는 데 사용할 수 없습니다 .
더 나은 방법이 있어야합니다
몇 가지 프로젝트에서 필요했기 때문에 지시문을 만들었습니다. 드디어 드롭 인 솔루션을 원하는 사람을 위해 GitHub에 게시했습니다.
https://github.com/webadvanced/ng-remote-validate
풍모:
모든 텍스트 또는 비밀번호 입력의 Ajax 유효성 검사를위한 드롭 인 솔루션
Angulars 빌드 유효성 검사와 함께 작동하며 formName.inputName. $ error.ngRemoteValidate에서 cab에 액세스 할 수 있습니다.
서버 요청 (기본값 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>
이것은 사용자 지정 지시문이 친구 인 또 다른 경우입니다. 지시문을 만들고 여기에 $ http 또는 $ resource를 삽입하여 유효성을 검사하는 동안 서버로 다시 호출 할 수 있습니다.
사용자 지정 지시문에 대한 일부 의사 코드 :
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.userEmail이 업데이트됩니다.
- 지시문에는 $ scope.userEmail에 $ watch가 있으며 링크 기능에 설정되어 있습니다.
- $ watch가 트리거되면 $ http ajax 호출을 통해 서버를 호출하여 이메일을 전달합니다.
- 서버는 이메일 주소를 확인하고 '{isValid : true}와 같은 간단한 응답을 반환합니다.
- 해당 응답은 컨트롤의 $ setValidity에 사용됩니다.
- uniqueEmail 유효성 상태가 false 인 경우에만 표시하도록 ng-show가 설정된 마크 업에이 있습니다.
... 사용자에게 다음을 의미합니다.
- 이메일을 입력하십시오.
- 약간의 멈춤.
- 이메일이 고유하지 않은 경우 "이메일이 고유하지 않음"메시지가 "실시간"으로 표시됩니다.
EDIT2 : 제출 버튼을 비활성화하기 위해 form. $ invalid를 사용할 수도 있습니다.
나에게 완벽하게 작동하는 솔루션으로 플 런커를 만들었습니다. 사용자 지정 지시문을 사용하지만 단일 필드가 아닌 전체 양식에 적용됩니다.
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 에 대해 배웠습니다.
내가별로 좋아하지 않는 것보다 약간 적은 옵션 지시문은 지시문을 작성하기위한 각 필드로서. 모듈은 동일합니다-범용 솔루션입니다.
그러나 모듈에서 나는 뭔가를 놓치고 있었다-필드에서 몇 가지 규칙을 확인하십시오.
그런 다음 러시아 README에 대한 https://github.com/borodatych/ngRemoteValidate
Apologies 모듈을 수정 했는데 결국 변경됩니다.
나는 갑자기 같은 문제를 가진 사람을 공유하기 위해 서둘러.
네, 우리는 이것을 위해 여기에 모였습니다 ...
Load:
<script type="text/javascript" src="../your/path/remoteValidate.js"></script>
Include:
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>
BackEnd [Kohana]
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);
}
ReferenceURL : https://stackoverflow.com/questions/12864887/angularjs-integrating-with-server-side-validation
'program tip' 카테고리의 다른 글
| 문자열 내에서 지정된 문자의 모든 색인 찾기 (0) | 2021.01.06 |
|---|---|
| PHP if in_array () 키를 얻는 방법은 무엇입니까? (0) | 2021.01.06 |
| 첫 번째 행의 첫 번째 필드를 인쇄하는 cut 또는 awk 명령 (0) | 2021.01.05 |
| 각 그룹에서 최대 값이있는 행을 선택하는 방법 (0) | 2021.01.05 |
| Rails 번 들러는 그룹 내에 gem을 설치하지 않습니다. (0) | 2021.01.05 |