提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

Cleave js 使用

JS 使用
2023-09-11 14:17:17 时间

1111111111111111

键入时格式化< 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 ...
    }
});

电话号码格式

选择国家
 
 
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

相关文章