Xác thực Mẫu - Xác thực Email không hoạt động như mong đợi trong AngularJs

Tôi đang sử dụng Góc để xác thực biểu mẫu.Xác thực Mẫu - Xác thực Email không hoạt động như mong đợi trong AngularJs

Đây là những gì tôi sử dụng - plunker-edit tôi đã lấy mã này từ tài liệu Angularjs - Binding to form and control state đã sử dụng loại như email nhưng khi tôi chạy này và nhập [email protected] nó nói nó là hợp lệ. Làm thế nào để sửa lỗi này?

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

PS: Tôi là một người mới bắt đầu trong AngularJs

Edit:

Ngoài ra các đầu vào sau wer cũng cho thấy giá trị

aaa aaa @
aaa aaa --- @ gmail.com
aaa`aaa @ aaa

Dự kiến email hợp lệ

Nguồn

2014-05-15 Yasser

abc @ abc theo như tôi biết địa chỉ email miền địa phương hợp lệ. - và 'cũng là các ký tự hợp lệ trong địa chỉ email – ivarni

Đây là góc regexp đang sử dụng btw: https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js#L12 – ivarni

kiểm tra điều này bạn có thể sử dụng ng-messages http://stackoverflow.com/questions/24490668/how-to-validate-email-id-in-angularjs-using-ng-pattern/38463063#38463063 –

Tham khảo câu trả lời của tôi khác: AngularJS v1.3.x Email Validation Issue

Cố gắng sử dụng ng-pattern trong nhập địa chỉ email của bạn.

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

Nó phù hợp với các trường hợp hợp lệ và không hợp lệ của bạn.

Xem ví dụ: plunk

Nguồn

2014-05-15 08:01:23 jackypan1989

Điều này không thành công nếu chữ cái đầu tiên của email được viết hoa. I E. [email protected] không thành công, nhưng [email protected] thì không. Thay vào đó, tôi đã sử dụng regex này - 'ng-pattern =". {1,} @ [_ a-z0-9A-Z] + (\. [A-z0-9A-Z] +) + "' –

khi tôi sử dụng ng-mô hình ở tất cả nó mang lại cho tôi "Không tải mẫu" - bất kỳ ý tưởng tại sao? - sao chép mã trên, không có lỗi trước khi – Pakk

Lạ lùng nó hoạt động tốt cho tôi về góc thêm lớp ng-invalid dựa trên mẫu trong khi form.input. $ error.email property dường như vẫn được thiết lập dựa trên việc xây dựng trong xác thực email. Vì vậy, phong cách của tôi của hộp đầu vào hoạt động tốt nhưng thông báo lỗi hiển thị sai ... –

Những email này đang hợp lệ, vì chúng có thể là email cục bộ hoặc đến máy chủ email mạng nội bộ: Domains.

TLD không bắt buộc đối với email địa phương. Như được hiển thị trong ví dụ trên Wikipedia, tên miền thậm chí có thể chứa một Địa chỉ IP thay cho tên miền.

Nguồn

2014-05-15 07:44:28

Trong trường hợp người dùng của tôi sẽ được nhập địa chỉ email của anh ta/cô ấy với một tld. Làm cách nào để xác thực trong trường hợp đó? – Yasser

@Yasser Bạn có thể sử dụng xác thực tùy chỉnh trong trường hợp của mình, sử dụng regex tùy chỉnh. –

Như ReCaptcha gợi ý tôi đã kết thúc việc tạo ra một chỉ thị xác nhận tùy chỉnh

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; 
       } 
      }); 
     } 
    }; 
});

và trong 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>

Nguồn

2014-05-15 08:44:51 Yasser

Tôi đã viết một directive mà sử dụng cùng email validationregular expression rằng sử dụng ASP.Net. Trong khi điều này có thể không bao gồm 100% các kịch bản, nó sẽ bao gồm phần lớn và hoạt động hoàn hảo cho những gì chúng ta cần để trang trải.

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); 
     }; 
    } 
}; 
}

Sử dụng nó như thế này:

<input type="email" ng-model="$scope.emailAddress" name="newEmailAddress" email/>

Nguồn

2015-04-03 18:07:30 dball

Thậm chí tốt hơn, bây giờ, góc có email validator built-in, từ góc 4 trở đi https://github.com/angular/angular/blob/master/CHANGELOG.md#features-6 https://github.com/angular/angular/pull/13709

Chỉ cần thêm email để tag. Ví dụ:

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

Nguồn

2017-04-17 05:44:37

Xác thực Mẫu - Xác thực Email không hoạt động như mong đợi trong AngularJs

Trả lời

Các vấn đề liên quan