itsource

ng-pattern을 사용하여 angularJs의 이메일 ID를 확인하는 방법

mycopycode 2023. 2. 14. 20:17
반응형

ng-pattern을 사용하여 angularJs의 이메일 ID를 확인하는 방법

ng-pattern 디렉티브를 사용하여 angularJs의 Email id 필드의 유효성을 확인하려고 합니다.

하지만 AngularJs는 처음입니다.사용자가 이메일 ID를 잘못 입력하면 바로 오류 메시지를 표시해야 합니다.

아래에 있는 코드는 해결하려고 하는 것입니다.ng-pattern을 사용하여 적절한 결과를 얻을 수 있도록 도와주세요.

<script type="text/javascript" src="/Login/script/ang.js"></script>
<script type="text/javascript">
    function Ctrl($scope) {
        $scope.text = 'enter email';
        $scope.word = /^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/;
    }
</script>
    </head>
<body>
    <form name="myform" ng-controller="Ctrl">
        <input type="text" ng-pattern="word" name="email">
        <span class="error" ng-show="myform.email.$error.pattern">
            invalid email!
        </span>
        <input type="submit" value="submit">
    </form>
</body>

이메일을 검증하려면 type="text" 대신 type="email"로 입력을 사용하십시오.각진JS 에서는, E-메일 검증이 곧바로 행해지고 있기 때문에, 이것에 ng-pattern 를 사용할 필요는 없습니다.

다음은 원본 문서의 예입니다.

<script>
function Ctrl($scope) {
  $scope.text = 'me@example.com';
}
</script>
<form name="myForm" ng-controller="Ctrl">
  Email: <input type="email" name="input" ng-model="text" required>
  <br/>
  <span class="error" ng-show="myForm.input.$error.required">
    Required!</span>
  <span class="error" ng-show="myForm.input.$error.email">
    Not valid email!</span>
  <br>
  <tt>text = {{text}}</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
  <tt>myForm.$error.email = {{!!myForm.$error.email}}</tt><br/>
</form>

상세한 것에 대하여는, 다음의 문서를 참조해 주세요.https://docs.angularjs.org/api/ng/input/input%5Bemail%5D

라이브 예:http://plnkr.co/edit/T2X02OhKSLBHskdS2uIM?p=info

업데이트:

내장된 이메일 검증기가 만족스럽지 않고 커스텀 RegExp 패턴 검증을 사용하려면 ng-pattern 디렉티브를 적용할 수 있습니다.설명서에 따르면 오류 메시지는 다음과 같이 표시될 수 있습니다.

ngModel의 경우 검증자는 패턴 오류 키를 설정합니다.$viewValue가 RegExp와 일치하지 않습니다.

<script>
function Ctrl($scope) {
  $scope.text = 'me@example.com';
  $scope.emailFormat = /^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/;
}
</script>
<form name="myForm" ng-controller="Ctrl">
  Email: <input type="email" name="input" ng-model="text" ng-pattern="emailFormat" required>
  <br/><br/>
  <span class="error" ng-show="myForm.input.$error.required">
    Required!
  </span><br/>
  <span class="error" ng-show="myForm.input.$error.pattern">
    Not valid email!
  </span>
  <br><br>
  <tt>text = {{text}}</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
  <tt>myForm.$error.pattern = {{!!myForm.$error.pattern}}</tt><br/>
</form>

Pluker: https://plnkr.co/edit/e4imaxX6rTF6jfWbp7mQ?p=preview

빌트인 검증자 앵글라독을 사용하여 이러한 문제를 해결하는 좋은 예가 있습니다.더 엄격한 검증 패턴만 추가했습니다.

app.directive('validateEmail', function() {
  var EMAIL_REGEXP = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;

  return {
    require: 'ngModel',
    restrict: '',
    link: function(scope, elm, attrs, ctrl) {
      // only apply the validator if ngModel is present and Angular has added the email validator
      if (ctrl && ctrl.$validators.email) {

        // this will overwrite the default Angular email validator
        ctrl.$validators.email = function(modelValue) {
          return ctrl.$isEmpty(modelValue) || EMAIL_REGEXP.test(modelValue);
        };
      }
    }
  };
});

덧붙이기만 하면

<input type='email' validate-email name='email' id='email' ng-model='email' required>

@scx의 답변에 따라 GUI 검증을 작성했습니다.

app.directive('validateEmail', function() {
  var EMAIL_REGEXP = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
  return {
    link: function(scope, elm) {
      elm.on("keyup",function(){
            var isMatchRegex = EMAIL_REGEXP.test(elm.val());
            if( isMatchRegex&& elm.hasClass('warning') || elm.val() == ''){
              elm.removeClass('warning');
            }else if(isMatchRegex == false && !elm.hasClass('warning')){
              elm.addClass('warning');
            }
      });
    }
  }
});

덧붙여 다음과 같이 합니다.

css

.warning{
   border:1px solid red;
 }

html

<input type='email' validate-email name='email' id='email' ng-model='email' required>

Regex Expression을 사용한jQuery 이메일 검증입니다.또한 Angular에도 동일한 개념을 사용할 수 있습니다.각도에 대해 알고 있는 경우 JSJS.

var expression = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;

출처.

ng-messages를 사용할 수 있습니다.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>

모듈을 포함하다

 angular.module("blank",['ngMessages']

html로

<input type="email" name="email" class="form-control" placeholder="email" ng-model="email" required>
<div ng-messages="myForm.email.$error">
<div ng-message="required">This field is required</div>
<div ng-message="email">Your email address is invalid</div>
</div>

다음은 이메일 검증의 완전한 패턴입니다.

<input type="text" pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]*\.([a-z]{2,4})$/" ng-model="emailid" name="emailid"/>

<div ng-message="pattern">Please enter valid email address</div>

현재 Angular 4에는 이메일 검증기(https://github.com/angular/angular/blob/master/CHANGELOG.md#features-6)가 내장되어 있습니다.

태그에 이메일만 추가하면 됩니다.예를들면

  <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>

angularjs controller way, 메시지 본문에서 하나 이상의 전자 메일을 검색하기 위한 예시입니다.

sp = $scope.messagebody; // email message body

if (sp != null && sp.match(/([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)\S+/)) {   
console.log('Error. You are not allowed to have an email in the message body');
}

다음 사이트에서 @Joanna의 방법을 시험해 봤지만 효과가 없었습니다.

  1. https://regex101.com/
  2. https://www.regextester.com/
  3. https://regexr.com/

그런 다음 수정했고 작동했습니다.

/([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)\S+

아래 regex를 사용해 보았습니다만, 정상적으로 동작하고 있습니다.

이메일 검증 : \w+([-+.')\w+)@\w+([-]\w+).\w+([-].\w+)*

시간을 좀 들여서 날 위해 일하도록 해

요건:

도메인 이름이 끝나는 전자 메일의 단일 또는 쉼표로 구분된 목록.surname@gmail.com 또는 team-email@list.gmail.com

컨트롤러:

$scope.email = {
   EMAIL_FORMAT:  /^\w+([\.-]?\w+)*@(list.)?gmail.com+((\s*)+,(\s*)+\w+([\.-]?\w+)*@(list.)?gmail.com)*$/,
   EMAIL_FORMAT_HELP: "format as 'your.name@gmail.com' or comma separated 'your.name@gmail.com, my.name@list.gmail.com'"
};

HTML:

<ng-form name="emailModal">
    <div class="form-group row mb-3">
        <label for="to" class="col-sm-2 text-right col-form-label">
            <span class="form-required">*</span>
            To
        </label>
        <div class="col-sm-9">
            <input class="form-control" id="to"
                   name="To"
                   ng-required="true"
                   ng-pattern="email.EMAIL_FORMAT"
                   placeholder="{{email.EMAIL_FORMAT_HELP}}"
                   ng-model="mail.to"/>
            <small class="text-muted" ng-show="emailModal.To.$error.pattern">wrong</small>
        </div>
    </div>
</ng-form>

좋은 온라인 정규식 테스트 도구를 찾았습니다.테스트로 정규식을 커버했습니다.

https://regex101.com/r/Dg2iAZ/6/tests

아래 정규식 사용

^[_\.0-9a-z-]+@([0-9a-z][0-9a-z-]+)+((\.)[a-z]{2,})+$

이 기능을 통해

test@test.com
test@test.co.in
test@test.gov.us
test@test.net
test@test.software

언급URL : https://stackoverflow.com/questions/24490668/how-to-validate-email-id-in-angularjs-using-ng-pattern

반응형

'itsource' 카테고리의 다른 글

조건식을 사용한 AngularJS ng-style  (0) 2023.02.14
변경 후 각도 JS 업데이트 입력 필드  (0) 2023.02.14
응답 텍스트 파일을 읽는 방법  (0) 2023.02.14
맵을 JavaScript 개체로 변환  (0) 2023.02.14
Angular에서 부모 스코프 값을 ng 반복 루프에 전달합니다.  (0) 2023.02.10

'itsource'의 다른글

  • 현재글ng-pattern을 사용하여 angularJs의 이메일 ID를 확인하는 방법

관련글

댓글

티스토리툴바