Tôi đang cố triển khai xác thực biểu mẫu cho trường email. Validation nên làm như sau:Xác thực mẫu email cùng một lúc
- Kiểm tra xem email đã được nhập qua thuộc tính cần thiết và hiển thị một thông báo nếu không có email đã được nhập
- Kiểm tra nếu email có định dạng hợp lệ (dường như được thực hiện tự động mà không chỉ định một thuộc tính) và hiển thị một thông báo nếu định dạng là sai
- Kiểm tra xem email là duy nhất trong một $ http.get gọi và hiển thị một tin nhắn trong trường hợp các email đã được tìm thấy và do đó không thể được sử dụng
Tôi muốn tin nhắn đầu tiên xuất hiện, nếu fie ld rỗng, thông điệp thứ hai xuất hiện nếu email không hợp lệ và thông báo thứ ba xuất hiện, nếu địa chỉ email được tìm thấy và do đó không phải là duy nhất tại một thời điểm.
Điều này có tác dụng nếu tôi chỉ thử thuộc tính "bắt buộc" nhưng ngay sau khi thêm thuộc tính chỉ thị có sẵn của email, nó không kiểm tra định dạng của email nữa và chỉ thị có sẵn qua email được thực thi cùng với thuộc tính bắt buộc. Cả hai thông báo đều bật lên nhưng tôi chỉ muốn người dùng nhìn thấy một thông báo tại một thời điểm.
Tôi đang sử dụng angularjs 1.1.3.
Ai đó có thể cho tôi biết tôi có thể làm gì sai không?
HTML
<div id="user_mod" class="mod_form" ng-show="userModScreenIsVisible">
<form name="mod_user" novalidate>
<input type="email" name="email" ng-model="user.email" placeholder="E-Mail" required email-available/>
<div class="user-help" ng-show="mod_user.email.$dirty && mod_user.email.$invalid">Invalid:
<span ng-show="mod_user.email.$error.required">Please enter your email.</span>
<span ng-show="mod_user.email.$error.email">This is not a valid email.</span>
<span ng-show="mod_user.email.$error.emailAvailable">This email address is already taken.</span>
</div>
</form>
Chỉ
directive('emailAvailable', function($http) { // available
return {
require: 'ngModel',
link: function(scope, elem, attr, ctrl) {
ctrl.$parsers.unshift(function(viewValue) {
ctrl.$setValidity('emailAvailable', false);
if(viewValue !== "" && typeof viewValue !== "undefined") {
console.log("variable is defined");
$http.get('/api/user/email/' + viewValue + '/available')
.success(function(data, status, headers, config) {
console.log(status);
ctrl.$setValidity('emailAvailable', true);
return viewValue;
})
.error(function(data, status, headers, config) {
console.log("error");
ctrl.$setValidity('emailAvailable', false);
return undefined;
});
} else {
console.log("variable is undefined");
ctrl.setValidity('emailAvailable', false);
return undefined;
}
});
}
};
});
Ahhhaaaaa, điều đó giải thích rất nhiều thứ. Vì vậy, các phương thức validator mặc định nằm trong phân tích cú pháp $ và nếu tôi unshift các phương thức xác nhận của tôi để bắt đầu mảng thay vì đẩy đến cuối mảng, các phương thức xác nhận mặc định sẽ bị overruled bởi phương thức của tôi. Ngoài ra, bạn đã mở một số nút trong tâm trí của tôi như thế nào xác nhận góc thực sự làm việc. Bạn có thực sự khám phá điều này bằng cách đọc tài liệu hướng dẫn góc không? Hay bạn có các nguồn khác? :) Cảm ơn anyway, giải thích chi tiết của bạn và ví dụ plunker làm cho tôi một người sử dụng angularjs hạnh phúc hơn. –
Tôi đọc qua [nguồn của họ trên GitHub] (https://github.com/angular/angular.js/tree/master/src). ;) Sau đó, nó đã được một số thử nghiệm và lỗi. Tôi cũng đã viết một [bài blog trên đó] (http://www.benlesh.com/2012/12/angular-js-custom-validation-via.html). –
Câu trả lời thứ hai mà tôi thấy, lần thứ hai tôi đã rất ấn tượng! – darethas