Я хотел бы подтвердить электронную почту и телефон, основываясь на следующем:
Если оба адреса электронной почты и телефон пусты или значение, содержащее их, недействительны, то оба недействительны с сообщением "Пожалуйста, укажите действительный адрес электронной почты или номер телефона".
Если адрес электронной почты недействителен, он недействителен, возможно, с вышеуказанным сообщением плюс "Это недействительный адрес электронной почты". То же самое касается телефона.
Вот что я получил до сих пор:
Шаблон/html:
<input type="email" name="email" class="form-control"
id="useredit:email"
data-ng-model="userInfo.email"
data-user-validate='email'
>
<span class="glyphicon form-control-feedback"
data-ng-class="setValidGlyph(userEdit.email,'mail');"
data-ng-show='!userEdit.email.$pristine'
data-tooltip-html-unsafe=
"{{getValidateMessage(userEdit.email,'email');}}"
data-tooltip-trigger='click'
data-tooltip-placement='bottom'
data-tooltip-append-to-body='true'
></span>
setValidGlyph происходит из appSettings и вычисляет, какой символ отображать:
setValidGlyph:function(input,fieldName){
return {
'glyphicon-info-sign':input.$error[fieldName] && !input.$pristine
,'glyphicon-ok': !input.$error[fieldName] && !input.$pristine
};
}
getValidateMessage поступает из appRules и будет отображать сообщения (сообщения) в зависимости от того, что функция validator установила true (см. код позже).
data-tooltip - это подсказка для бутстрапа ui.
Директива:
angular.module('app').directive('userValidate'
, ['appSettings', 'appRules', function(appSettings,appRules) {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
var fn=appRules.user.validate(attrs.userValidate);
ctrl.$parsers.unshift(
function(viewValue){
fn(viewValue,ctrl);
}
);
ctrl.$error.messages=
appRules.user.validateMessages[attrs.userValidate];
}
};
}]);
apprules:
angular.module('app').factory('appRules'
, ['appSettings',function(appSettings){
var appRules = {
user:{
validate:function(name){
return appRules.user.validateFunctions[name];
},
validateFunctions: {
email:function(viewValue,ctrl){
// mail indicates if this box is valid or not used for css
ctrl.$setValidity('mail'
, appRules.general.isEmail(viewValue));
//specific to see if email is valid
//removed isEmail to make code shorter
ctrl.$setValidity('invalidEmail'
, appRules.general.isEmail(viewValue));
}
},
getValidateMessage:function(ctrl,name){
var ret = [],i=-1,len=ctrl.$error.messages.length;
while(++i<len){
if(ctrl.$error[ctrl.$error.messages[i]]){
ret.push('<p>');
ret.push(appSettings
.userFailMessages[ctrl.$error.messages[i]]);
ret.push('</p>');
}
}
return ret.join('');
},
validateMessages: {
name:['emptyName'],
email:['invalidEmail','phoneOrEmail']
}
}
};
return appRules;
}]
);
appSettings.userFailMessages находится в appSettings и выглядит следующим образом:
appSettings.userFailMessages.invalidEmail="Please provide a valid email.";
В appRules.validateFunctions.email Я хотел бы получить доступ к телефону. $pristine и phone. $error, но переданные аргументы являются только текущим элементом управления вводом и не имеют доступа к его форме.
Как я могу получить к нему доступ? Возможно, где-нибудь в шаблоне я могу установить форму с помощью:
{{setForm(userEdit);}}
Где userEdit - это имя формы, а setForm - это метод appRules, но он вроде бы неаккуратный.
Причина проверки и сообщений в правилах и настройках заключается в том, что мне неудобно иметь правила домена и сообщения об ошибках в моем шаблоне.