Cleave js 使用
1111111111111111
信用卡号码格式
明确
-
美国运通:从34/37开始
34
-
签证:从4开始
4
-
大来俱乐部:从300-305 / 309开始......
300
-
万事达卡:从51-55 / 22-27开始
51
-
JCB:从35/2131/1800开始
35
-
发现:从6011 | 65 | 644-649开始
6011
var cleave = new Cleave('.input-element', {
creditCard: true,
onCreditCardTypeChanged: function (type) {
// update UI ...
}
});
电话号码格式
选择国家
var cleave = new Cleave('.input-element', {
phone: true,
phoneRegionCode: '{country}'
});
日期格式
var cleave = new Cleave('.input-element', {
date: true,
datePattern: ['Y', 'm', 'd']
});
var cleave = new Cleave('.input-element', {
date: true,
datePattern: ['m', 'y']
});
时间格式化
var cleave = new Cleave('.input-element', {
time: true,
timePattern: ['h', 'm', 's']
});
var cleave = new Cleave('.input-element', {
time: true,
timePattern: ['h', 'm']
});
数字格式
风格:千
var cleave = new Cleave('.input-element', {
numeral: true,
numeralThousandsGroupStyle: 'thousand'
});
自定义选项
var cleave = new Cleave('.input-element', {
blocks: [4, 3, 3, 4],
uppercase: true
});
var cleave = new Cleave('.input-element', {
delimiter: '·',
blocks: [3, 3, 3],
uppercase: true
});
var cleave = new Cleave('.input-element', {
delimiters: ['.', '.', '-'],
blocks: [3, 3, 3, 2],
uppercase: true
});
var cleave = new Cleave('.input-element', {
prefix: 'PREFIX',
delimiter: '-',
blocks: [6, 4, 4, 4],
uppercase: true
});
ReactJS组件
import React from 'react';
import ReactDOM from 'react-dom';
import Cleave from 'cleave.js/react';
class MyComponent extends React.Component {
onChange(event) {
// formatted pretty value
console.log(event.target.value);
// raw value
console.log(event.target.rawValue);
}
render() {
return (
<Cleave placeholder="Enter your credit card number"
options={{creditCard: true}}
onChange={this.onChange.bind(this)} />
); }
}
在操场上试一试