Cleave js 使用

1111111111111111 xxxxxx

Cleave.js

键入时格式化 < input />内容

 

信用卡号码格式

明确

•  

  美国运通：从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 ... } });

电话号码格式

AC广告AEAFAGAIAL上午AOAR如在AUAW斧头AZBABBBD是BFBGBH双BJBLBMBNBOBQBRBSBTBW通过BZCACC光盘CFCGCHCICKCL厘米CNCOCRCU简历CWCXCYCZDEDJDKDM做DZECEE例如EHERESETFI缩略词FK调频FOFRGAGBGD通用电器GFGGGHGIGLGMGNGPGQGRGTGUGWGYHKHNHRH T胡IDIEILIM在IO智商IRIS它JEJMJOJ.PKE公斤KHKIKMKNKPKRKWKYKZLA磅LC李LKLRLSLT鲁LVLY嘛MCMD我MFMGMHMKMLMMMNMOMPMQ先生女士公吨亩MVMWMXMYMZNANCNENFNG你NL没有NPNRNUNZOMPAPEPFPGPHPKPL下午PRPSPTPWPYQA回覆RORSRURWSASBSCSDSESGSHSISJSKSLSMSN所以SRSSSTSVSXSYSZTATCTDTGTHTJTKTLTM值TN至TRTT电视TWTZUAUG我们UYUZVA虚电路VEVGVIVNVUWFWSYEYTZAZMZW

选择国家

 

 

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)} /> ); } } 

在操场上试一试

 

操场

JSFiddle（Basic）  JSFiddle（更多情况）  React JSFiddle  Angular JSFiddle

转载于:https://www.cnblogs.com/developer-ios/p/10119158.html