2013-05-31 43 views
7

Tôi có biểu mẫu đăng ký cho một ứng dụng và js góc có trách nhiệm xác thực của nó.Xác thực Email góc Angular với các ký tự unicode

Tôi gặp sự cố khi Angular js không chấp nhận địa chỉ email có dấu nháy đơn trong đó. "Pear'[email protected]".

Tôi phát hiện ra rằng angularJs không thích các ký tự unicode trong địa chỉ email.

Có ai khác gặp phải vấn đề như thế này, tôi quan tâm đến việc biết các tùy chọn của tôi để tránh xa lỗi này trong angularJs.

Mọi thông tin đầu vào đều được đánh giá cao. Cảm ơn !

+1

Bạn đã cân nhắc viết chức năng xác thực tùy chỉnh chưa? http://jsfiddle.net/adamdbradley/Qdk5M/ – shaunhusain

Trả lời

17

Nếu có html5 <input type=email /> là không quan trọng, bạn có thể sử dụng <input type=text /> và xác nhận mẫu

<input type="text" ng-model="field" ng-pattern="EMAIL_REGEXP" /> 

và bạn có thể sử dụng regex mà @Andy Joslin đăng trong câu trả lời của mình

$scope.EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-][email protected][a-z0-9-]+(\.[a-z0-9-]+)*$/i; 
+0

REGEX mà bạn đã cung cấp didn 't giải quyết vấn đề apostrophe. Tôi đã thêm "'" vào REGEX trong tệp angular.js và nó đã hoạt động. Tôi cũng không thay đổi kiểu đầu vào thành "văn bản". – Nanu

+0

Tôi đã kiểm tra câu trả lời của bạn, vì nó có thể giúp một người có vấn đề như thế này với việc sử dụng ng-pattern. – Nanu

+0

Khi sử dụng biểu thức này trực tiếp trong mẫu ng mà không có biến, '\ .' phải được thoát hai lần vì nó là một biểu thức WITHIN một chuỗi. '\\.' – Soviut

11

AngularJS sử dụng biểu thức chính quy này để kiểm tra email: https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js#L4

gì bạn có thể làm là viết một chỉ thị để kiểm tra nó cho mình. Chỉ cần sao chép một từ AngularJS và sử dụng regexp của riêng bạn: https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js#L606-L614

myApp.directive('nanuEmail', function() { 
    return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function(scope, elm, attrs, model) { 
     //change this: 
     var EMAIL_REGEXP = /^[A-Za-z0-9._%+-][email protected][A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/; 
     var emailValidator = function(value) { 
     if (!value || EMAIL_REGEXP.test(value)) { 
     model.$setValidity('email', true); 
     return value; 
     } else { 
     model.$setValidity('email', false); 
     return undefined; 
     } 
     model.$parsers.push(emailValidator); 
     model.$formatters.push(emailValidator); 
    } 
    }; 
}); 

Sau đó, bạn chỉ có thể làm:

<input nanu-email ng-model="userEmail"> 
+2

Hoặc bạn chỉ có thể sử dụng '' – vittore

1

Tôi vừa cập nhật regex trong tệp angular.js (thêm "'" trong biểu thức) và nó hoạt động mà không thực hiện bất kỳ thay đổi nào khác.

EMAIL_REGEXP = /^[A-Za-z0-9._%+- '] + @ [A-Za-z0-9 .-] +. [A-Za-z] {2, 4} $ /. Cảm ơn Vittore, đã cho tôi ý tưởng cập nhật REGEX. :)

0

tại sao bạn trả lại không xác định?

Refactoring của hàm:

var verificationEmail = function (viewValue) { 
    if ((typeof viewValue != "undefined") && viewValue != "") { 
    return regex.test(viewValue); 
    } 
}; 
0

góc không hỗ trợ dấu nháy đơn (') trong Id email. Nếu bạn cần phải xác nhận các dấu nháy đơn trong góc, bạn cần thay đổi các biểu thức chính quy từ:

(/^[A-Za-z0-9._%+-][email protected][A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/) 

Để:

/^[A-Za-z0-9._%+'-][email protected][A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/. 

Nó sẽ hoạt động hoàn hảo.

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