介紹

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

---

---

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。