Cleave 输入格式插件

使用说明

Cleave插件是github上很受欢迎的输入格式化插件,可对日期、时间、电话号码进行自动格式化处理,本框架使用的版本是v1.6.0,详见github或在线演示DEMO

日期格式

使用date: true属性表示按日期进行格式化,delimiter: '-'表示是分隔符,datePattern: ['Y', 'm', 'd']表示要显示的内容。

输入日期:
  • <script type="text/javascript" src="https://src.axui.cn/v2.0/dist/plugins/cleave/cleave.min.js"></script>
    <script type='text/javascript'>
      var cleave = new Cleave('.input-date', {
                date: true,
                delimiter: '-',
                datePattern: ['Y', 'm', 'd']
            });
    </script>
                            
  •                                 <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">输入日期:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <input type="text" class="input-date" placeholder="年-月-日"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                        

手机格式

使用phone: true属性表示按手机号进行格式化,phoneRegionCode: 'cn'表示是中国的手机号格式,注意引用中国手机号格式的js文件。

手机号:
  • <script type="text/javascript" src="https://src.axui.cn/v2.0/dist/plugins/cleave/cleave.min.js"></script>
    <script type="text/javascript" src="https://src.axui.cn/v2.0/dist/plugins/cleave/addons/cleave-phone.cn.js"></script>
    <script type='text/javascript'>
    var cleave = new Cleave('.input-phone', {
                phone: true,
                phoneRegionCode: 'cn'
            });
    </script>
                            
  •                                 <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">名称</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <input type="text" class="input-phone" placeholder="请输入11位手机号码"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                        

其他格式

本文再举两个例子,更多例子请详见官方演示DEMO

千位分割:
自定义:
  • <script type="text/javascript" src="https://src.axui.cn/v2.0/dist/plugins/cleave/cleave.min.js"></script>
    <script type='text/javascript'>
            var cleave = new Cleave('.input-thousand', {
                numeral: true,
                numeralThousandsGroupStyle: 'thousand'
            });
    
            var cleave = new Cleave('.input-custom', {
                blocks: [4, 3, 3, 4],
                uppercase: true
            });
    </script>
                            
  •                                 <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">千位分割:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <input type="text" class="input-thousand" placeholder="请输入金额"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ax-break"></div>
                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">自定义:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <input type="text" class="input-custom" placeholder="请输入随意数字"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>