介紹

Cleave.js是一個幫助表單實現(xiàn)各種復(fù)雜實時格式化顯示的工具庫，可以說Cleave.js讓表單的輸入變得更加的高逼格，能實現(xiàn)很多復(fù)雜的表單格式化顯示，簡而言之就是針對<input/>標(biāo)簽按照諸如千分位、電話號碼等風(fēng)格的特定顯示！

---

---

Github

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

特征

• 信用卡號碼格式
• 電話號碼格式(國際化)
• 日期格式
• 數(shù)字格式
• 自定義定界符，前綴和塊模式
• CommonJS / AMD模塊化
• ReactJS組件
• AngularJS指令(1.x)
• ES模塊化

為什么使用Cleave.js?

Cleave.js是通過格式化鍵入的數(shù)據(jù)來提供一種提高輸入字段可讀性的簡便方法。通過使用該庫，無需編寫任何令人難以置信的正則表達(dá)式或掩碼模式即可格式化輸入文本。但是，這并不意味著要替換任何驗證或掩碼庫，仍然需要對數(shù)據(jù)進(jìn)行服務(wù)器端的校驗。也就是說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 ( ); }}

總結(jié)

Cleave.js是一個非常值得使用的表單工具庫，其實時的格式化顯示會讓表單特征更加豐富，enjoy it！

總結(jié)

以上是生活随笔為你收集整理的服务器端验证表单_Web表单开发之实时格式化显示——Cleave.js的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。