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 相关文章推荐
一款利用html5和css3实现的3D立方体旋转效果教程
Apr 26 HTML / CSS
CSS3样式linear-gradient的使用实例
Jan 16 HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
May 13 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 HTML / CSS
html2canvas把div保存图片高清图的方法示例
Mar 05 HTML / CSS
HTML5如何使用SVG的方法示例
Jan 11 HTML / CSS
使用HTML+Css+transform实现3D导航栏的示例代码
Mar 31 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
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
js charAt的使用示例
2014/02/18 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
bootstrap的工具提示实例代码
2017/05/17 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
[02:05]2014DOTA2西雅图邀请赛 专访啸天mik夫妻档
2014/07/08 DOTA
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
Python 转义字符详细介绍
2017/03/21 Python
matplotlib中legend位置调整解析
2017/12/19 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
平面设计师的工作职责
2013/11/21 职场文书
单位门卫岗位职责
2013/12/20 职场文书
社会学专业求职信
2014/02/24 职场文书
文体活动实施方案
2014/03/27 职场文书
职业生涯规划书前言
2014/04/15 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
降价通知函
2015/04/23 职场文书
文艺演出主持词
2015/07/01 职场文书
合作合同协议书
2016/03/21 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
python基础之类方法和静态方法
2021/10/24 Python
SQL中的三种去重方法小结
2021/11/01 SQL Server