반응형
AngularJS에서 전화 및 신용 카드 번호 형식 지정
질문 1 (전화 번호 형식 지정) :
AngularJS에서 전화 번호 형식을 지정해야하는 필터가 없습니다. 필터 또는 통화를 사용하여 10 자리 형식을 지정하는 방법이 (555) 555-5255있습니까? 필드의 데이터 유형을 정수로 유지하고 있습니까?
질문 2 (신용 카드 번호 마스킹) :
AngularJS에 매핑 된 신용 카드 필드가 있습니다.
<input type="text" ng-model="customer.creditCardNumber">
정수 ( 4111111111111111)를 반환합니다 . 처음 12 자리를 xxx로 마스킹하고 마지막 4 자리 만 표시하고 싶습니다. filter : 이것을 사용할 수있는 방법이 명확하지 않습니다. 어떤 아이디어? 대시로 숫자 형식을 지정하지만 데이터 유형을 정수로 유지하는 방법이 있습니까? 일종의 4111-1111-1111-1111.
또한 출력에서만 전화 번호 형식을 지정해야하는 경우 다음과 같은 사용자 정의 필터를 사용할 수 있습니다.
angular.module('ng').filter('tel', function () {
return function (tel) {
if (!tel) { return ''; }
var value = tel.toString().trim().replace(/^\+/, '');
if (value.match(/[^0-9]/)) {
return tel;
}
var country, city, number;
switch (value.length) {
case 10: // +1PPP####### -> C (PPP) ###-####
country = 1;
city = value.slice(0, 3);
number = value.slice(3);
break;
case 11: // +CPPP####### -> CCC (PP) ###-####
country = value[0];
city = value.slice(1, 4);
number = value.slice(4);
break;
case 12: // +CCCPP####### -> CCC (PP) ###-####
country = value.slice(0, 3);
city = value.slice(3, 5);
number = value.slice(5);
break;
default:
return tel;
}
if (country == 1) {
country = "";
}
number = number.slice(0, 3) + '-' + number.slice(3);
return (country + " (" + city + ") " + number).trim();
};
});
그런 다음 템플릿 에서이 필터를 사용할 수 있습니다.
{{ phoneNumber | tel }}
<span ng-bind="phoneNumber | tel"></span>
사용자 지정 지시문과 함께 제공되는 필터를 사용하여 전화 번호와 관련된이 문제를 처리하기 위해 AngularJS 모듈을 만들었습니다.
jsfiddle 예 : http://jsfiddle.net/aberke/s0xpkgmq/
필터 사용 예 : <p>{{ phonenumberValue | phonenumber }}</p>
필터 코드 :
.filter('phonenumber', function() {
/*
Format phonenumber as: c (xxx) xxx-xxxx
or as close as possible if phonenumber length is not 10
if c is not '1' (country code not USA), does not use country code
*/
return function (number) {
/*
@param {Number | String} number - Number that will be formatted as telephone number
Returns formatted number: (###) ###-####
if number.length < 4: ###
else if number.length < 7: (###) ###
Does not handle country codes that are not '1' (USA)
*/
if (!number) { return ''; }
number = String(number);
// Will return formattedNumber.
// If phonenumber isn't longer than an area code, just show number
var formattedNumber = number;
// if the first character is '1', strip it out and add it back
var c = (number[0] == '1') ? '1 ' : '';
number = number[0] == '1' ? number.slice(1) : number;
// # (###) ###-#### as c (area) front-end
var area = number.substring(0,3);
var front = number.substring(3, 6);
var end = number.substring(6, 10);
if (front) {
formattedNumber = (c + "(" + area + ") " + front);
}
if (end) {
formattedNumber += ("-" + end);
}
return formattedNumber;
};
});
지침 사용 예 :
<phonenumber-directive placeholder="'Input phonenumber here'" model='myModel.phonenumber'></phonenumber-directive>
지시어 코드 :
.directive('phonenumberDirective', ['$filter', function($filter) {
/*
Intended use:
<phonenumber-directive placeholder='prompt' model='someModel.phonenumber'></phonenumber-directive>
Where:
someModel.phonenumber: {String} value which to bind only the numeric characters [0-9] entered
ie, if user enters 617-2223333, value of 6172223333 will be bound to model
prompt: {String} text to keep in placeholder when no numeric input entered
*/
function link(scope, element, attributes) {
// scope.inputValue is the value of input element used in template
scope.inputValue = scope.phonenumberModel;
scope.$watch('inputValue', function(value, oldValue) {
value = String(value);
var number = value.replace(/[^0-9]+/g, '');
scope.phonenumberModel = number;
scope.inputValue = $filter('phonenumber')(number);
});
}
return {
link: link,
restrict: 'E',
scope: {
phonenumberPlaceholder: '=placeholder',
phonenumberModel: '=model',
},
// templateUrl: '/static/phonenumberModule/template.html',
template: '<input ng-model="inputValue" type="tel" class="phonenumber" placeholder="{{phonenumberPlaceholder}}" title="Phonenumber (Format: (999) 9999-9999)">',
};
}])
모듈이 포함 된 전체 코드 및 사용 방법 : https://gist.github.com/aberke/042eef0f37dba1138f9e
shailbenq가 제안 했듯이 phoneformat 은 굉장합니다.
웹 사이트에 전화 형식을 포함하세요. 각도 모듈 또는 응용 프로그램에 대한 필터를 만듭니다.
angular.module('ng')
.filter('tel', function () {
return function (phoneNumber) {
if (!phoneNumber)
return phoneNumber;
return formatLocal('US', phoneNumber);
}
});
그런 다음 HTML에서 필터를 사용할 수 있습니다.
{{phone|tel}}
OR
<span ng-bind="phone|tel"></span>
컨트롤러에서 필터를 사용하려는 경우.
var number = '5553219876';
var newNumber = $filter('tel')(number);
또한 Angular 앱에 포함하기 제 (bower : D와 함께) 가능한 모든 국가 코드를 해당 마스크로 확인하는 JQuery 내장도 발견했습니다. intl-tel-input
그런 다음 validationScript입력 값의 유효성을 확인하기 위해 옵션 을 사용할 수 있습니다 .
Angular-ui에는 마스킹 입력에 대한 지시문이 있습니다. 아마도 이것은 마스킹에 필요한 문서는 그다지 좋지 않을 수 있습니다.
나는 이것이 신용 카드 번호를 난독 화하는 데 도움이 될 생각하지 않습니다.
입력 마스크 형식 터를 확인할 수도 있습니다 .
지시문이며 호출 이것은 ui-mask되며 라이브러리 의 일부이기도 합니다.angular-ui.utils
다음은 작동합니다. 라이브 예제
이 게시물을 작성하는 동안이 지시문을 사용하는 예가 내부이 작업이 실제로 작동하는 동안 매우 간단한 예 를 만들었습니다 .
이것은 간단한 방법입니다. 기본적으로 http://codepen.io/rpdasilva/pen/DpbFf 에서 가져 오기와 몇 가지 변경 작업을 수행했습니다. 지금은 코드가 더 간단합니다. 그리고 당신은 얻을 수 있습니다 : 컨트롤러 - " 4124561232 ", 뷰 " (412) 456-1232 "
필터 :
myApp.filter 'tel', ->
(tel) ->
if !tel
return ''
value = tel.toString().trim().replace(/^\+/, '')
city = undefined
number = undefined
res = null
switch value.length
when 1, 2, 3
city = value
else
city = value.slice(0, 3)
number = value.slice(3)
if number
if number.length > 3
number = number.slice(0, 3) + '-' + number.slice(3, 7)
else
number = number
res = ('(' + city + ') ' + number).trim()
else
res = '(' + city
return res
그리고 지시 :
myApp.directive 'phoneInput', ($filter, $browser) ->
require: 'ngModel'
scope:
phone: '=ngModel'
link: ($scope, $element, $attrs) ->
$scope.$watch "phone", (newVal, oldVal) ->
value = newVal.toString().replace(/[^0-9]/g, '').slice 0, 10
$scope.phone = value
$element.val $filter('tel')(value, false)
return
return
phoneformat.js ( http://www.phoneformat.com/ )를 사용하는 방법 . 사용자 로케일 (en-US, ja-JP, fr-FR, de-DE 등)에 따라 전화 번호의 형식이있을 수 있고 전화 번호가 확인됩니다. Google의 libphonenumber 프로젝트를 기반으로하는 매우 강력한 라이브러리입니다.
더 가벼운 ng-pattern을 사용할 수 있습니다. http://tutorialzine.com/2014/12/learn-regular-expressions-in-20-minutes/ . 여기서 당신은 당신이 당신에 대해 알 수 있습니다. ,, 단지 의미있는 단어 ,,, 지시문이나 필터가 필요하지 않습니다. ,,,
나는 aberke의 해결책을 취하여 내 취향에 맞게 수정했습니다.
- 단일 입력 요소를 생성합니다.
- 선택적으로 확장을 허용합니다.
- 미국 번호의 경우 선행 국가 코드를 건너 뜁니다.
- 표준 명명 규칙
- 코드를 사용하여 클래스를 사용합니다. 수업을 구성하지 않는다
- 입력 요소에 허용되는 다른 속성의 사용을 허용합니다.
내 코드 펜
var myApp = angular.module('myApp', []);
myApp.controller('exampleController',
function exampleController($scope) {
$scope.user = { profile: {HomePhone: '(719) 465-0001 x1234'}};
$scope.homePhonePrompt = "Home Phone";
});
myApp
/*
Intended use:
<phone-number placeholder='prompt' model='someModel.phonenumber' />
Where:
someModel.phonenumber: {String} value which to bind formatted or unformatted phone number
prompt: {String} text to keep in placeholder when no numeric input entered
*/
.directive('phoneNumber',
['$filter',
function ($filter) {
function link(scope, element, attributes) {
// scope.inputValue is the value of input element used in template
scope.inputValue = scope.phoneNumberModel;
scope.$watch('inputValue', function (value, oldValue) {
value = String(value);
var number = value.replace(/[^0-9]+/g, '');
scope.inputValue = $filter('phoneNumber')(number, scope.allowExtension);
scope.phoneNumberModel = scope.inputValue;
});
}
return {
link: link,
restrict: 'E',
replace: true,
scope: {
phoneNumberPlaceholder: '@placeholder',
phoneNumberModel: '=model',
allowExtension: '=extension'
},
template: '<input ng-model="inputValue" type="tel" placeholder="{{phoneNumberPlaceholder}}" />'
};
}
]
)
/*
Format phonenumber as: (aaa) ppp-nnnnxeeeee
or as close as possible if phonenumber length is not 10
does not allow country code or extensions > 5 characters long
*/
.filter('phoneNumber',
function() {
return function(number, allowExtension) {
/*
@param {Number | String} number - Number that will be formatted as telephone number
Returns formatted number: (###) ###-#### x #####
if number.length < 4: ###
else if number.length < 7: (###) ###
removes country codes
*/
if (!number) {
return '';
}
number = String(number);
number = number.replace(/[^0-9]+/g, '');
// Will return formattedNumber.
// If phonenumber isn't longer than an area code, just show number
var formattedNumber = number;
// if the first character is '1', strip it out
var c = (number[0] == '1') ? '1 ' : '';
number = number[0] == '1' ? number.slice(1) : number;
// (###) ###-#### as (areaCode) prefix-endxextension
var areaCode = number.substring(0, 3);
var prefix = number.substring(3, 6);
var end = number.substring(6, 10);
var extension = number.substring(10, 15);
if (prefix) {
//formattedNumber = (c + "(" + area + ") " + front);
formattedNumber = ("(" + areaCode + ") " + prefix);
}
if (end) {
formattedNumber += ("-" + end);
}
if (allowExtension && extension) {
formattedNumber += ("x" + extension);
}
return formattedNumber;
};
}
);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="exampleController">
<p>Phone Number Value: {{ user.profile.HomePhone || 'null' }}</p>
<p>Formatted Phone Number: {{ user.profile.HomePhone | phoneNumber }}</p>
<phone-number id="homePhone"
class="form-control"
placeholder="Home Phone"
model="user.profile.HomePhone"
ng-required="!(user.profile.HomePhone.length || user.profile.BusinessPhone.length || user.profile.MobilePhone.length)" />
</div>이 형식으로 전화를 출력하도록 코드를 수정했습니다. 값 : +38 (095) 411-22-23 여기에 링크 설명을 입력하여 확인할 수 있습니다.
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.currencyVal;
});
myApp.directive('phoneInput', function($filter, $browser) {
return {
require: 'ngModel',
link: function($scope, $element, $attrs, ngModelCtrl) {
var listener = function() {
var value = $element.val().replace(/[^0-9]/g, '');
$element.val($filter('tel')(value, false));
};
// This runs when we update the text field
ngModelCtrl.$parsers.push(function(viewValue) {
return viewValue.replace(/[^0-9]/g, '').slice(0,12);
});
// This runs when the model gets updated on the scope directly and keeps our view in sync
ngModelCtrl.$render = function() {
$element.val($filter('tel')(ngModelCtrl.$viewValue, false));
};
$element.bind('change', listener);
$element.bind('keydown', function(event) {
var key = event.keyCode;
// If the keys include the CTRL, SHIFT, ALT, or META keys, or the arrow keys, do nothing.
// This lets us support copy and paste too
if (key == 91 || (15 < key && key < 19) || (37 <= key && key <= 40)){
return;
}
$browser.defer(listener); // Have to do this or changes don't get picked up properly
});
$element.bind('paste cut', function() {
$browser.defer(listener);
});
}
};
});
myApp.filter('tel', function () {
return function (tel) {
console.log(tel);
if (!tel) { return ''; }
var value = tel.toString().trim().replace(/^\+/, '');
if (value.match(/[^0-9]/)) {
return tel;
}
var country, city, num1, num2, num3;
switch (value.length) {
case 1:
case 2:
case 3:
city = value;
break;
default:
country = value.slice(0, 2);
city = value.slice(2, 5);
num1 = value.slice(5,8);
num2 = value.slice(8,10);
num3 = value.slice(10,12);
}
if(country && city && num1 && num2 && num3){
return ("+" + country+" (" + city + ") " + num1 +"-" + num2 + "-" + num3).trim();
}
else if(country && city && num1 && num2) {
return ("+" + country+" (" + city + ") " + num1 +"-" + num2).trim();
}else if(country && city && num1) {
return ("+" + country+" (" + city + ") " + num1).trim();
}else if(country && city) {
return ("+" + country+" (" + city ).trim();
}else if(country ) {
return ("+" + country).trim();
}
};
});
전화 번호 및 신용 카드에 대한 사용자 지정 양식 컨트롤 (지시문으로)을 전달합니다. 양식 페이지의 "사용자 정의 양식 컨트롤 구현 (ngModel 사용)"섹션을 참조 하십시오.
Narretz가 이미 언급했듯이 Angular-ui의 Mask 지시문 은 시작하는 데 도움이 될 것입니다.
다음과 같은 간단한 필터 ([]의 입력 종료 필터 문자에 숫자 클래스 사용) :
<script type="text/javascript">
// Only allow number input
$('.numeric').keyup(function () {
this.value = this.value.replace(/[^0-9+-\.\,\;\:\s()]/g, ''); // this is filter for telefon number !!!
});
다음은 패턴을 확인하는 ssn 지시문을 만든 방법이며 RobinHerbots를 사용했습니다. jquery.inputmask
angular.module('SocialSecurityNumberDirective', [])
.directive('socialSecurityNumber', socialSecurityNumber);
function socialSecurityNumber() {
var jquery = require('jquery');
var inputmask = require("jquery.inputmask");
return {
require: 'ngModel',
restrict: 'A',
priority: 1000,
link: function(scope,element, attr, ctrl) {
var jquery_element = jquery(element);
jquery_element.inputmask({mask:"***-**-****",autoUnmask:true});
jquery_element.on('keyup paste focus blur', function() {
var val = element.val();
ctrl.$setViewValue(val);
ctrl.$render();
});
var pattern = /^\d{9}$/;
var newValue = null;
ctrl.$validators.ssnDigits = function(value) {
newValue = element.val();
return newValue === '' ? true : pattern.test(newValue);
};
}
};
}
사용자 지정 Angular 필터 로도이 문제를 해결했지만 내 정규식 작업 그룹을 활용 코드가 정말 짧습니다. stripNonNumeric입력을 삭제하기 위해 별도의 필터 와 처리합니다 .
app.filter('stripNonNumeric', function() {
return function(input) {
return (input == null) ? null : input.toString().replace(/\D/g, '');
}
});
phoneFormat필터가 제대로 또는 지역 번호없이 전화 번호를 포맷합니다. (국제 번호 지원이 필요하지 않습니다.)
app.filter('phoneFormat', function() {
//this establishes 3 capture groups: the first has 3 digits, the second has 3 digits, the third has 4 digits. Strings which are not 7 or 10 digits numeric will fail.
var phoneFormat = /^(\d{3})?(\d{3})(\d{4})$/;
return function(input) {
var parsed = phoneFormat.exec(input);
//if input isn't either 7 or 10 characters numeric, just return input
return (!parsed) ? input : ((parsed[1]) ? '(' + parsed[1] + ') ' : '') + parsed[2] + '-' + parsed[3];
}
});
간단하게 사용하십시오.
<p>{{customer.phone | stripNonNumeric | phoneFormat}}</p>
stripNonNumeric필터 의 정규식 은 여기 에서 나 입니다.
angularjs 지시문을 사용하여 신용 카드 번호 형식화를위한 Plunker를 찾으십시오 . xxxxxxxxxxxx3456 Fromat에서 카드 번호를 포맷합니다.
angular.module('myApp', [])
.directive('maskInput', function() {
return {
require: "ngModel",
restrict: "AE",
scope: {
ngModel: '=',
},
link: function(scope, elem, attrs) {
var orig = scope.ngModel;
var edited = orig;
scope.ngModel = edited.slice(4).replace(/\d/g, 'x') + edited.slice(-4);
elem.bind("blur", function() {
var temp;
orig = elem.val();
temp = elem.val();
elem.val(temp.slice(4).replace(/\d/g, 'x') + temp.slice(-4));
});
elem.bind("focus", function() {
elem.val(orig);
});
}
};
})
.controller('myCtrl', ['$scope', '$interval', function($scope, $interval) {
$scope.creditCardNumber = "1234567890123456";
}]);
각도 앱에 'xeditable'삽입을 삽입합니다 (무료 사용 가능) :
var App = angular.module('App', ['xeditable']);
그런 다음 HTML 코드에서 다음과 같이 기본 제공 기능을 사용합니다.
<div>{{ value|number:2 }}</div>
참고 URL : https://stackoverflow.com/questions/12700145/format-telephone-and-credit-card-numbers-in-angularjs
반응형
'ProgramingTip' 카테고리의 다른 글
| Rails에서 부울 매개 변수를 어떻게 사용합니까? (0) | 2020.11.06 |
|---|---|
| {% URL 사용 ??? (0) | 2020.11.06 |
| 첫 번째 활동에서 애플리케이션을 강제로 다시 시작 (0) | 2020.11.06 |
| 정확한 n 개의 요소가 집합의 모든 하위 집합을 어떻게 사용할 수 있습니까? (0) | 2020.11.06 |
| 긴 어깨의 10 자만 표시 하시겠습니까? (0) | 2020.11.06 |