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 实现侧边栏展开收起动画
Dec 22 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
浅析HTML5页面元素及属性
Jan 20 HTML / CSS
html+css实现文字折叠特效实例
Jun 02 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 25 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单元测试phpunit入门实例教程
2017/11/17 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
jquery选择器简述
2015/08/31 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
vue跨域解决方法
2017/10/15 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
阿望教你用vue写扫雷小游戏
2020/01/20 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
python全栈开发语法总结
2020/11/22 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
会计与审计专业大专生求职信
2013/10/03 职场文书
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
上班睡觉检讨书
2014/01/09 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
听课评语大全
2014/04/30 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
文明社区申报材料
2014/08/21 职场文书
小学英语复习计划
2015/01/19 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
2019思想汇报范文
2019/05/21 职场文书