amazeui页面校验功能的实现代码


Posted in HTML / CSS onAugust 24, 2020

如下图所示:

amazeui页面校验功能的实现代码 

邮政“邮政编码”字段,数据库中是varchar2(10)。

但是amazeui的页面校验中,关于字符长度的校验方式如下:

JS 表单验证

JS 表单验证基于 HTML5 的各项验证属性进行:

  • required: 必填;
  • pattern: 验证正则表达式,插件内置了 emailurlnumber 三种类型的正则表达式;
  • minlength/maxlength: 字符限制;
  • min/max: 最小、最大值限制,仅适用于数值类型的域;
  • minchecked/maxchecked: 至少、至多选择数,适用于 checkbox、下拉多选框,checkbox 时将相关属性的设置在同组的第一个元素上;
  • .js-pattern-xx: 验证规则 class,正则库中存在的规则可以通过添加相应 class 实现规则添加。

注意:

HTML5 原生表单验证中 pattern 只验证值的合法性,也就是可以不填,如果填写则必须符合规则。如果是必填项,仍要添加 required 属性。该插件与 HTML5 的规则保持一致。
 

<!-- 下面三种写法等效 -->
<!-- 只内置了 email url number 三种类型的正则,可自行扩展 -->
<input type="email"/>
<!-- js-pattern-xx 其中 xx 为 pattern 库中的 key -->
<input type="text" class="js-pattern-email"/>
<input type="text" pattern="^(...email regex...)$"/>

即maxlength=10,amazeui的意思是可以输入10个字(数字、字母、汉字等同对待,都视为一个字

但是假如前段输入了10个汉字”中中中中中中中中中中“,提交后肯定数据库长度溢出,因为该字段数据库的长度是varchar2(10)即10byte只能存3.3333个不到4个汉字(因为一个汉字如果GBK\GB2312编码占2个字节,但是unicode\utf-8编码占3个字节)。
 

所以仅maxlength=10不能正确的限制输入,还要加上js-pattern-number这个限制(这个确保输入的是整数,这样汉字就输入不进去了)。

总结

到此这篇关于amazeui页面校验功能的实现代码的文章就介绍到这了,更多相关amazeui页面校验内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
纯CSS3发光分享按钮的实现教程
Sep 06 HTML / CSS
浅析css3中matrix函数的使用
Jun 06 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
HTML5实现Notification API桌面通知功能
Mar 02 HTML / CSS
HTML5 canvas 基本语法
Aug 26 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 #HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
Aug 21 #HTML / CSS
Canvas波浪花环的示例代码
Aug 21 #HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
Aug 21 #HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 #HTML / CSS
amazeui 验证按钮扩展的实现
Aug 21 #HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 #HTML / CSS
You might like
PHP的历史和优缺点
2006/10/09 PHP
php与php MySQL 之间的关系
2009/07/17 PHP
php中使用preg_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
yii2.0数据库迁移教程【多个数据库同时同步数据】
2016/10/08 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
ubuntu 18.04 安装opencv3.4.5的教程(图解)
2019/11/04 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
Django 返回json数据的实现示例
2020/03/05 Python
南非领先的在线旅行社:Travelstart南非
2016/09/04 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
证婚人搞笑证婚词
2014/01/10 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
工商行政管理专业求职书
2014/05/23 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
募捐感谢信
2015/01/22 职场文书
离婚协议书怎么写
2015/01/26 职场文书
2016公司新年问候语
2015/11/11 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
Go获取两个时区的时间差
2022/04/20 Golang