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让网页设计提升到下一个高度
Aug 14 HTML / CSS
纯css3(无图片/js)制作的几个社交媒体网站的图标
Mar 21 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
css3媒体查询中device-width和width的区别详解
Mar 27 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
Aug 22 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
Sep 30 HTML / CSS
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
Aug 07 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 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
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
JQuery的一些小应用收集
2010/03/27 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
PyQT实现多窗口切换
2018/04/20 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
Python设计密码强度校验程序
2020/07/30 Python
Python操作Excel的学习笔记
2021/02/18 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
SIXPAD智能健身仪英国官网:革命性的训练装备品牌
2018/09/27 全球购物
猫咪家具:CatsPlay
2018/11/03 全球购物
还款承诺书范文
2014/05/20 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
离婚协议书范文
2015/01/26 职场文书
北京英语导游词
2015/02/12 职场文书
呼兰河传读书笔记
2015/06/30 职场文书