Angular를 사용하여 형식 유효성 검사에서 두 입력 값 비교JS
AngularJS를 사용하여 폼 검증을 하려고 합니다.저는 특히 두 가지 값을 비교하는 데 관심이 있습니다.계속하기 전에 사용자가 입력한 데이터를 확인했으면 합니다.아래 코드가 있다고 칩시다.
<p>
Email:<input type="email" name="email1" ng-model="emailReg">
Repeat Email:<input type="email" name="email2" ng-model="emailReg2">
<p>
다음으로 검증을 사용할 수 있습니다.
<span ng-show="registerForm.email1.$error.required">Required!</span>
<span ng-show="registerForm.email1.$error.email">Not valid email!</span>
<span ng-show="emailReg !== emailReg2">Emails have to match!</span> <-- see this line
register Form을 클릭합니다.$valid는 사용자가 폼을 제출할 수 있도록 하기 전에 이 검증에서 비교를 사용하는 방법을 모르는 경우를 제외하고 입력된 텍스트에 대해 올바르게 반응합니다.
커스텀 디렉티브가 없는 솔루션을 원합니다만, 이것이 없으면 대응하겠습니다.다음은 커스텀 디렉티브와 관련된 유사한 문제에 대처하는 답변입니다.
도움에 감사드립니다.
ng-pattern/regex를 사용하여 2개의 입력값을 비교할 수 있어야 합니다.
Email:<input type="email" name="email1" ng-model="emailReg">
Repeat Email:<input type="email" name="email2" ng-model="emailReg2" ng-pattern="emailReg">
및 검증:
<span ng-show="registerForm.email2.$error.pattern">Repeat Email should have the same value with email!</span>
이를 실현하기 위한 한 가지 방법은 커스텀 디렉티브입니다. 디렉티브 디렉티브)를 한 예시입니다ng-match : in in （ ） :
<p>Email:<input type="email" name="email1" ng-model="emailReg">
Repeat Email:<input type="email" name="email2" ng-model="emailReg2" ng-match="emailReg"></p>
<span data-ng-show="myForm.emailReg2.$error.match">Emails have to match!</span>
않는 것이 .ng-는 공식 Angular Angular와 할 수 때문입니다.JS ★★★★
갱신하다
커스텀 디렉티브를 사용하지 않고, 다음의 기능을 사용할 수도 있습니다.
HTML
<button ng-click="add()></button>
<span ng-show="IsMatch">Emails have to match!</span>
컨트롤러
$scope.add = function() {
if ($scope.emailReg != $scope.emailReg2) {
$scope.IsMatch=true;
return false;
}
$scope.IsMatch=false;
}
trainosais - 맞아요, 검증은 지시적인 수준에서 이루어져야 합니다.깔끔하고 모듈러형이며 코드를 재사용할 수 있습니다.컨트롤러에서 이와 같은 기본적인 검증을 수행할 경우 여러 양식에 대해 여러 번 다시 작성해야 합니다.그거 완전 건조하네.
최근에 비슷한 문제가 발생하여 파서스 파이프라인에 접속하여 Angular 아키텍처와 일관성을 유지하는 간단한 지시로 해결했습니다.검증자를 체인으로 연결하면 재사용이 매우 쉬워지므로 이 솔루션만이 유일한 솔루션이라고 생각합니다.
더 이상 소란을 피우지 않고 단순화된 마크업을 다음에 나타냅니다.
<form novalidate="novalidate">
<label>email</label>
<input type="text"
ng-model="email"
name="email" />
<label>email repeated</label>
<input ng-model="emailRepeated"
same-as="email"
name="emailRepeated" />
</form>
JS 코드는 다음과 같습니다.
angular.module('app', [])
.directive('sameAs', function() {
return {
require: 'ngModel',
link: function(scope, elem, attrs, ngModel) {
ngModel.$parsers.unshift(validate);
// Force-trigger the parsing pipeline.
scope.$watch(attrs.sameAs, function() {
ngModel.$setViewValue(ngModel.$viewValue);
});
function validate(value) {
var isValid = scope.$eval(attrs.sameAs) == value;
ngModel.$setValidity('same-as', isValid);
return isValid ? value : undefined;
}
}
};
});
디렉티브는 뷰 값의 변경을 통지받고 새로운 뷰 값과 참조 필드 값의 비교를 기반으로 유효성을 설정하기 위해 파서스 파이프라인에 접속합니다.그건 쉬워요.까다로운 점은 참조 필드의 변경 사항을 탐지하는 것입니다.이를 위해 디렉티브는 모든 검증자를 다시 실행하기 위해 참조 값에 워처를 설정하고 구문 분석 파이프라인을 강제로 트리거합니다.
가지고 놀고 싶다면, 여기 내 펜이 있다: http://codepen.io/jciolek/pen/kaKEn
도움이 됐으면 좋겠어, 제이섹
나는 최근에 어떤 검증도 할 수 있을 만큼 충분히 일반적일 수 있는 커스텀 디렉티브를 작성했다.현재 범위에서 검증 기능을 사용합니다.
module.directive('customValidator', [function () {
return {
restrict: 'A',
require: 'ngModel',
scope: { validateFunction: '&' },
link: function (scope, elm, attr, ngModelCtrl) {
ngModelCtrl.$parsers.push(function (value) {
var result = scope.validateFunction({ 'value': value });
if (result || result === false) {
if (result.then) {
result.then(function (data) { //For promise type result object
ngModelCtrl.$setValidity(attr.customValidator, data);
}, function (error) {
ngModelCtrl.$setValidity(attr.customValidator, false);
});
}
else {
ngModelCtrl.$setValidity(attr.customValidator, result);
return result ? value : undefined; //For boolean result return based on boolean value
}
}
return value;
});
}
};
}]);
그것을 사용하려면, 당신은 해야 한다.
<input type="email" name="email2" ng-model="emailReg2" custom-validator='emailMatch' data-validate-function='checkEmailMatch(value)'>
<span ng-show="registerForm.email2.$error.emailMatch">Emails have to match!</span>
그러면 컨트롤러에서 true 또는 false를 반환하는 메서드를 구현할 수 있습니다.
$scope.checkEmailMatch=function(value) {
return value===$scope.emailReg;
}
장점은 각 사용자 정의 검증에 대해 사용자 정의 지시문을 작성할 필요가 없다는 것입니다.
각도 1.3 이상으로 업그레이드 할 때 Jacek Ciolek의 훌륭한 답변에 따라 문제가 발견되었습니다.
- 참조 필드에 데이터 추가
- 지시문이 있는 필드에 동일한 데이터 추가(이 필드는 현재 유효)
- 참조 필드로 돌아가 데이터를 변경합니다(디렉티브 필드는 유효합니다).
rdukeshier의 답변을 테스트했습니다(업데이트).var modelToMatch = element.attr('sameAs')로로 합니다.var modelToMatch = attrs.sameAs참조 모델을 올바르게 취득할 수 있습니다).그러나, 같은 문제가 발생했습니다.
이를 수정하기 위해(각도 1.3 및 1.4에서 테스트됨) rdukeshier의 코드를 수정하고 참조 필드가 변경되었을 때 모든 검증을 실행할 수 있도록 참조 필드에 워처를 추가했습니다.이제 지시문은 다음과 같습니다.
angular.module('app', [])
.directive('sameAs', function () {
return {
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
var modelToMatch = attrs.sameAs;
scope.$watch(attrs.sameAs, function() {
ctrl.$validate();
})
ctrl.$validators.match = function(modelValue, viewValue) {
return viewValue === scope.$eval(modelToMatch);
};
}
};
});
기능이나 지시는 필요 없습니다.뷰에서 $modelValue를 비교해 보십시오.
ng-show="formName.email.$modelValue !== formName.confirmEmail.$modelValue"
자세한 예:
<span ng-show="(formName.email.$modelValue !== formName.confirmEmail.$modelValue)
&& formName.confirmEmail.$touched
&& !formName.confirmEmail.$error.required">Email does not match.</span>
Confirm Email은 View Model 외부에 있으며 $scope의 재산입니다.제출하지 않아도 됩니다.
ng-valid 및 ng-valid가 올바르게 동작할 수 있도록 ng-pattern을 사용합니다.
Email:<input type="email" name="email1" ng-model="emailReg">
Repeat Email:<input type="email" name="email2" ng-model="emailReg2" ng-pattern="emailReg">
<span ng-show="registerForm.email2.$error.pattern">Emails have to match!</span>
@Henry-Neo의 방법은 가까웠기 때문에 좀 더 엄격한 Regex 규칙이 필요했다.
<form name="emailForm">
Email: <input type="email" name="email1" ng-model="emailReg">
Repeat Email: <input type="email" name="email2" ng-model="emailReg2" ng-pattern="(emailReg)">
</form>
시키면 regex의 문자열 합니다.emailReg로로 합니다.emailReg2일치하지 않기 때문에 폼 검증에 실패합니다.
그런 다음 요소를 드릴다운하여 어떤 부품이 고장났는지 확인할 수 있습니다.
<p ng-show="emailForm.$valid">Form Valid</p>
<p ng-show="emailForm.email1.$error">Email not valid</p>
<p ng-show="emailForm.email1.$valid && emailForm.email1.$error.pattern">
Emails Do Not Match
</p>
이 모듈은 2개의 필드를 비교하는데 적합합니다.Angular 1.3+와 함께 사용할 수 있습니다.https://www.npmjs.com/package/angular-password의 간단한 사용
또한 모듈을 범용으로 저장할 수도 있습니다.모듈의 패키지 목록에 포함하기만 하면 됩니다.
커스텀 검증자 디렉티브의 간단한 버전을 다음에 나타냅니다.
angular.module('app')
.directive('equalsTo', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ngModel) {
scope.$watchGroup([attrs.equalsTo, () => ngModel.$modelValue], newVal => {
ngModel.$setValidity('equalsTo', newVal[0] === newVal[1]);
});
}
};
})
sameAs 디렉티브의 각도 1.3 버전을 다음에 나타냅니다.
angular.module('app').directive('sameAs', [function() {
'use strict';
return {
require: 'ngModel',
restrict: 'A',
link: function(scope, element, attrs, ctrl) {
var modelToMatch = element.attr('sameAs');
ctrl.$validators.match = function(modelValue, viewValue) {
return viewValue === scope.$eval(modelToMatch);
};
}
};
}]);
내 것은 당신의 솔루션과 비슷하지만 나는 그것을 작동시켰다.다른 점은 제 모델입니다.html 입력에 다음과 같은 모델이 있습니다.
ng-model="new.Participant.email"
ng-model="new.Participant.confirmEmail"
컨트롤러에는 $scope로 되어 있습니다.
$scope.new = {
Participant: {}
};
이 검증 행은 유효했습니다.
<label class="help-block" ng-show="new.Participant.email !== new.Participant.confirmEmail">Emails must match! </label>
@Jacek Ciolek의 훌륭한 예에 감사드립니다.각도 1.3.x의 경우 기준 입력 값을 업데이트하면 이 솔루션이 중단됩니다.이 예에서 Angular 1.3.x에 대해 구축한 이 솔루션은 Angular 1.3.x와 동일하게 작동합니다.이 명령어는 참조값의 변경을 바인드하고 감시합니다.
angular.module('app', []).directive('sameAs', function() {
return {
restrict: 'A',
require: 'ngModel',
scope: {
sameAs: '='
},
link: function(scope, elm, attr, ngModel) {
if (!ngModel) return;
attr.$observe('ngModel', function(value) {
// observes changes to this ngModel
ngModel.$validate();
});
scope.$watch('sameAs', function(sameAs) {
// watches for changes from sameAs binding
ngModel.$validate();
});
ngModel.$validators.sameAs = function(value) {
return scope.sameAs == value;
};
}
};
});
여기 제 펜이 있습니다: http://codepen.io/kvangrae/pen/BjxMWR
당신은 더 큰 문제를 봐야 해요.하나의 문제를 해결하는 지시문을 작성하는 방법.directive use-form-error를 사용해 보십시오.이 문제를 비롯한 여러 가지 문제를 해결하는 데 도움이 될까요?
<form name="ExampleForm">
<label>Password</label>
<input ng-model="password" required />
<br>
<label>Confirm password</label>
<input ng-model="confirmPassword" required />
<div use-form-error="isSame" use-error-expression="password && confirmPassword && password!=confirmPassword" ng-show="ExampleForm.$error.isSame">Passwords Do Not Match!</div>
</form>
라이브 예시 jsfiddle
어플리케이션 전체에서 하나의 형태로 이 작업을 수행해야 합니다.또한 이 경우 매우 복잡한 명령어를 볼 수 있기 때문에ng-patter예를 들어, 문자열에 다음과 같은 특수 문자가 있을 때 몇 가지 문제가 있습니다..[\이것이 고장나서 scape 특수문자를 위한 기능을 만듭니다.
$scope.escapeRegExp(str) {
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}
뷰에서
<form name="ExampleForm">
<label>Password</label>
<input ng-model="password" required />
<br>
<label>Confirm password</label>
<input ng-model="confirmPassword" required ng-pattern="escapeRegExp(password)"/>
</form>
물론 매우 간단한 비교를 위해 언제든지 사용할 수 있습니다.ngMin/ngMax.
그렇지 않으면 커스텀 디렉티브를 사용할 수 있습니다.또, 이 명령어를 실행할 필요도 없습니다.$watch또는$observe또는$eval또는 이 상상$setValidity앞뒤로또, postLink 기능에 접속할 필요도 없습니다.각도에 반하는 것이므로 가능한 한 DOM에 접근하지 않도록 합니다.
프레임워크가 제공하는 라이프 사이클 훅을 사용하면 됩니다.검증자를 추가하고$validate각 변경마다.그렇게 간단하다.
app.directive('sameAs', function() {
return {
restrict: 'A',
require: {
ngModelCtrl: 'ngModel'
},
scope: {
reference: '<sameAs'
},
bindToController: true,
controller: function($scope) {
var $ctrl = $scope.$ctrl;
//add the validator to the ngModelController
$ctrl.$onInit = function() {
function sameAsReference (modelValue, viewValue) {
if (!$ctrl.reference || !modelValue) { //nothing to compare
return true;
}
return modelValue === $ctrl.reference;
}
$ctrl.ngModelCtrl.$validators.sameas = sameAsReference;
};
//do the check at each change
$ctrl.$onChanges = function(changesObj) {
$ctrl.ngModelCtrl.$validate();
};
},
controllerAs: '$ctrl'
};
});
당신의 plunker.
Chandermani의 메서드를 Angularjs 1.3 이상에 대응하도록 수정했습니다.$parser에서 $asyncValidators로 이행되었습니다.
module.directive('customValidator', [function () {
return {
restrict: 'A',
require: 'ngModel',
scope: { validateFunction: '&' },
link: function (scope, elm, attr, ngModelCtrl) {
ngModelCtrl.$asyncValidators[attr.customValidator] = function (modelValue, viewValue) {
return new Promise(function (resolve, reject) {
var result = scope.validateFunction({ 'value': viewValue });
if (result || result === false) {
if (result.then) {
result.then(function (data) { //For promise type result object
if (data)
resolve();
else
reject();
}, function (error) {
reject();
});
}
else {
if (result)
resolve();
else
reject();
return;
}
}
reject();
});
}
}
};
}]);
용도는 동일합니다.
언급URL : https://stackoverflow.com/questions/22173016/comparing-two-input-values-in-a-form-validation-with-angularjs
'programing' 카테고리의 다른 글
| AngularJS의 Run Block에서 약속을 기다리는 방법 (0) | 2023.03.10 |
|---|---|
| "SELECT FOR UPDATE"는 행이 없을 때 다른 연결을 삽입할 수 없도록 합니까? (0) | 2023.03.10 |
| 빈 초기화 완료 후 메서드 호출 방법 (0) | 2023.03.10 |
| 리액트 네이티브로 함수가 가득한 도우미 파일을 작성하려면 어떻게 해야 합니까? (0) | 2023.03.10 |
| SQL 순서 위치 표기법을 사용하는 이점 (0) | 2023.03.10 |