服务器端验证表单_Web表单开发之实时格式化显示——Cleave.js
介绍
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相关推荐
- JQuery ajax提交表单及表单验证
JQuery ajax提交表单及表单验证 博客分类: jsp/html/javascript/ajax/development Kit 开源项目 注:经过验证,formValidator只适合一个页面 ...
- JavaScript 表单与表单验证
JavaScript 表单 JavaScript 表单验证 HTML 表单验证可以通过 JavaScript 来完成. 以下实例代码用于判断表单字段(fname)值是否存在,如果存在,则弹出信息,否则 ...
- Vant-UI 表单组件(Field组件):验证表单元素表单提交 - 踩坑篇
Vant-UI 表单组件(Field组件):验证表单元素&&表单提交: 示例截图 · 如下: 示例 · 详细代码 · 如下: <template><div class ...
- html表单自动提交表单提交表单数据类型,表单
表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域:包含了文本框.密码框.隐藏域.多行文本框. ...
- 分步表单_表单设计-掌握表单设计方法(表单体验篇)
全篇阅读大概需要15min,对表单设计不熟悉的同学看完后肯定会有不少的收获~~~ 说到表单其实在生活中可以接触到各种各样的表单,比如:驾照申请表.体检表.银行开户需要填写的表等等,这些都是表单,主要目 ...
- 第三章 表单与表单元素
学习目标 理解表单的作用 理解表单与表单元素的关系 掌握表单标签及其属性 掌握各种表单元素标签及其属性 在Web网页中,浏览者经常需要与Web服务器进行数据交互.当浏览者需要填写数据并将这些数据发送到 ...
- 前端:HTML/06/表单,表单元素(单行文本域,单行密码域,单选按钮,复选框,下拉列表,文本区域,上传文件域,各种按钮,隐藏域,lt;caption表格标题)
表单<form>(块元素) 表单的概念:表单主要用来获取用户数据(信息),如:注册表单, 查询表单,登录表单. 表单的工作原理: 浏览有表单的网页,填写一些必要的信息,然后点击某个按钮进行 ...
- AngularJS表单操作几个例子(表单提交,表单编辑默认值)
听同事讲AngularJS比jquery还要强大一些于时就开始了AngularJS学习工作,但在学习AngularJS中发现对于表单提交与表单默认值都不会搞,下面来看看几个关于AngularJS Fo ...
- 【表单】表单数据的提交和处理
1.什么是表单 (转自:https://blog.csdn.net/ixygj197875/article/details/79904298) HTML 表单的主要作用是接收用户的输入,当用户提交表单 ...
最新文章
- centos安装ffmpeg php,lnmp下安装ffmpeg和ffmpeg-php教程
- Laravel Breadcrumbs 自动面包屑导航
- pytorch按照索引取batch中的数
- 史上最全的Maven Pom文件标签详解
- mysql 视图没主键,mysql创建视图后打开提示没有主键,mysql视图
- python中文聊天_GitHub - 116pythonZS/chinese_chatbot_corpus: 中文公开聊天语料库
- php smarty配置,PHP中使用Smarty模板目录结构配置
- linux设备开发详解宋宝华,[Linux设备驱动开发详解(第2版)].宋宝华.pdf
- web安全与渗透测试培训全套视频
- easychm生成帮助文件时出现的目录导航乱码问题
- js 获取窗口高度 兼容 各种浏览器
- 天玑9200领跑背后,高端芯片掀起蝴蝶效应
- [Unity][摄像机视角]多个摄像机之间切换
- 采用flv.js与dplayer播放器来播放http-flv格式视频
- 树莓派4B刷openwrt软路由系统,树莓派做有线路由器的扩展实现各种自定义操作
- Photoshop创意设计手法14点(转)
- 51单片机 独立按键k1控制数码管移位 k2控制数值加
- 永远的《毕业生》之《Scarborough Fair》
- NPDP日常记忆知识点一
- HTML+CSS【超浪漫的表白网页代码】不会编程也能制作送给女朋友的表白网站