양식 유효성 검사 - 전자 메일 유효성 검사가 AngularJs에서 예상대로 작동하지 않습니다.
양식 검증을 위해 Angular를 사용하고 있습니다.
여기 제가 사용하는 것이 있습니다 - plunker-edit Angularjs documentation에서 이 코드를 가져왔습니다 - Binding to form and control state Have type을 다음과 같이 사용했습니다.email내가 이걸 실행하고 들어갈 때abc@abc그것은 유효하다고 말합니다.이거 어떻게 고쳐요?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example100-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="">
<div ng-controller="Controller">
<form name="form" class="css-form" novalidate>
E-mail:
<input type="email" ng-model="user.email" name="uEmail" required/><br />
<div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
<span ng-show="form.uEmail.$error.required">Tell us your email.</span>
<span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
</div>
</form>
</div>
</body>
</html>
추신: 저는 AngularJs 초보입니다.
편집:
또한 다음의 입력 또한 유효한 것으로 나타남
- aaa@
- aaa---aaa@gmail.com
- aaa'aaa@
유효한 이메일이 필요합니다.
- aabc@ddd.com
- aaa.aaa@fddd.co.in
- aaa@ddd.co.uk
나의 또 다른 대답을 참고하세요: 각진JS v1.3.x 이메일 유효성 검사 문제
이메일 입력에 ng 패턴을 사용해 보십시오.
<input type="email" name="input" ng-model="text" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" required>
그것은 당신의 유효한 경우와 무효인 경우에 들어맞습니다.
예제 참조: plunk
이러한 전자 메일은 로컬 전자 메일일 수도 있고 인트라넷 전자 메일 서버: 도메인일 수도 있으므로 유효합니다.
로컬 이메일에는 TLD가 필요하지 않습니다.위키피디아 예에서 볼 수 있듯이 도메인에는 도메인 대신 IP 주소가 포함될 수도 있습니다.
이제 Angular는 Angular 4 이후 https://github.com/angular/angular/blob/master/CHANGELOG.md#features-6 https://github.com/angular/angular/pull/13709 https://github.com/angular/angular/pull/13709 에 e-메일 검증기가 내장되어 있습니다.
태그에 이메일을 추가하기만 하면 됩니다.예를들면
<form #f="ngForm">
<input type="email" ngModel name="email" required email>
<button [disabled]="!f.valid">Submit</button>
<p>Form State: {{f.valid?'VALID':'INVALID'}}</p>
</form>
ReCaptcha가 제안한 대로 사용자 지정 유효성 검사 지침을 작성했습니다.
var app = angular.module('login-form', []);
var INTEGER_REGEXP = new RegExp('^[a-z0-9]+(\.[_a-z0-9]+)*@@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,50})$', 'i');
app.directive('cemail', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function (viewValue) {
if (INTEGER_REGEXP.test(viewValue)) {
// it is valid
ctrl.$setValidity('cemail', true);
return viewValue;
} else {
// it is invalid, return undefined (no model update)
ctrl.$setValidity('cemail', false);
return undefined;
}
});
}
};
});
html로
<label>Email</label>
<input id="UserName" name="UserName" type="text" value="" data-ng-model="email" required="" cemail>
<span data-ng-show="form.UserName.$dirty && form.UserName.$invalid">
<span data-ng-show="form.UserName.$error.required">Required</span>
<span data-ng-show="form.UserName.$error.cemail">Invalid Email</span>
</span>
나는 a를 썼습니다.directive동일한 것을 사용하는email validation regular expression그거ASP.Net100% 시나리오를 다 포괄할 수는 없지만 대부분을 포괄할 수 있고 우리가 감당해야 할 부분을 완벽하게 소화할 수 있습니다.
function email() {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
if (!ctrl) {
return false;
}
function isValidEmail(value) {
if (!value) {
return false;
}
// Email Regex used by ASP.Net MVC
var regex = /^[\w-]+(\.[\w-]+)*@([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$/i;
return regex.exec(value) != null;
}
scope.$watch(ctrl, function () {
ctrl.$validate();
});
ctrl.$validators.email = function (modelValue, viewValue) {
return isValidEmail(viewValue);
};
}
};
}
다음과 같이 사용합니다.
<input type="email" ng-model="$scope.emailAddress" name="newEmailAddress" email/>
각6
저는 일반적으로 $$@$$$ 형식을 허용하지 않고 항상 TLD(.com, .net, .org 등)를 기대합니다.
각진 것 외에emailvalidator 나의 regex를 추가합니다.pattern효과를 내기 위해서 입니다.
<input type="email" name="email" pattern="^\S*[@]\S*[.]\S*$" email required />
패턴="^\"S*[@]\S*[.]\S*$"는 @ 와 a 뒤에 문자열이 있는지 확인합니다.이것은 Angular의 이메일 인증에 추가될 것입니다.
언급URL : https://stackoverflow.com/questions/23671934/form-validation-email-validation-not-working-as-expected-in-angularjs
'programing' 카테고리의 다른 글
| Chart.js의 파이 차트에서 이벤트를 클릭 (0) | 2023.10.28 |
|---|---|
| 글꼴(@font-face)이 이미 로드되었는지 어떻게 알 수 있습니까? (0) | 2023.10.28 |
| 내 SQL 저장 지속 시간 - 데이터 유형? (0) | 2023.10.28 |
| C에서 좋은 오픈 소스 B-트리 구현은 무엇입니까? (0) | 2023.10.28 |
| sql이 java programming 'distinct'보다 빠른 경우 (0) | 2023.10.28 |