Cleave.js–Web表单开发之实时格式化显示

Vedu • 2020-12-10 07:35 • 资源分享 • 阅读 1432

介绍

Cleave.js是一个帮助表单实现各种复杂实时格式化显示的工具库，可以说Cleave.js让表单的输入变得更加的高逼格，能实现很多复杂的表单格式化显示，简而言之就是针对标签按照诸如千分位、电话号码等风格的特定显示！

Github

https://github.com/nosir/cleave.js

特征

信用卡号码格式
电话号码格式（国际化）
日期格式
数字格式
自定义定界符，前缀和块模式
CommonJS / AMD模块化
ReactJS组件
AngularJS指令（1.x）
ES模块化

为什么使用Cleave.js?

Cleave.js是通过格式化键入的数据来提供一种提高输入字段可读性的简便方法。通过使用该库，无需编写任何令人难以置信的正则表达式或掩码模式即可格式化输入文本。但是，这并不意味着要替换任何验证或掩码库，仍然需要对数据进行服务器端的校验。也就是说Cleave.js是为了更加好的可读性

实践

信用卡

var cleave = new Cleave(\'.input-element\', {
    creditCard: true,
    onCreditCardTypeChanged: function (type) {
        // update UI ...
    }
});

日期

var cleave = new Cleave(\'.input-element\', {
    date: true,
    delimiter: \'-\',
    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\'
});

自定义

React组件

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

总结

Cleave.js是一个非常值得使用的表单工具库，其实时的格式化显示会让表单特征更加丰富。

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/17206.html

Cleave.js–Web表单开发之实时格式化显示

介绍

Github

特征

为什么使用Cleave.js?

实践

React组件

总结

相关推荐

发表评论