京东6.18大促主会场领京享红包更优惠

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 8231|回复: 0

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

[复制链接]

22

主题

0

回帖

10

积分

新手上路

积分
10
发表于 2020-9-25 13:08:47 | 显示全部楼层 |阅读模式 来自 中国
如下图所示:
" G( k" ]& Y( ~4 S% `
 

$ m' T2 S. `; ?  s 邮政“邮政编码”字段,数据库中是varchar2(10)。
; D, C3 k" h: _# q( j 但是amazeui的页面校验中,关于字符长度的校验方式如下:
5 E# E% ^  z( l* h( o; n JS 表单验证
: d: @3 t& e; T0 v. u9 Z3 @) U JS 表单验证基于 HTML5 的各项验证属性进行:
4 w4 d. U2 J0 x+ m! t1 x
+ C) N, n; {1 Y4 u  C
         0 s" p! p+ _; J
  • required: 必填;     : j" `; y" l- D3 @- A2 N1 j$ x
  • pattern: 验证正则表达式,插件内置了 email、url、number 三种类型的正则表达式;     
    % d( C& w, y7 K
  • minlength/maxlength: 字符限制;     ! r; q6 b, N+ ?; l% ]) ]* u
  • min/max: 最小、最大值限制,仅适用于数值类型的域;     
    : k* ?& h! j% j) F  M! Y1 W% N& X/ Z
  • minchecked/maxchecked: 至少、至多选择数,适用于 checkbox、下拉多选框,checkbox 时将相关属性的设置在同组的第一个元素上;     & H2 X; z" w2 C
  • .js-pattern-xx: 验证规则 class,正则库中存在的规则可以通过添加相应 class 实现规则添加。 0 {" s( c, P' G, s
注意:
6 ?) w% y' H1 _; j7 c HTML5 原生表单验证中 pattern 只验证值的合法性,也就是可以不填,如果填写则必须符合规则。如果是必填项,仍要添加 required 属性。该插件与 HTML5 的规则保持一致。% r0 |' h/ k6 T+ q
 
7 o; h1 C  c1 V; T  i! \  o
  1.      
复制代码
即maxlength=10,amazeui的意思是可以输入10个字(数字、字母、汉字等同对待,都视为一个字: p! Y$ J+ n0 I
但是假如前段输入了10个汉字”中中中中中中中中中中“,提交后肯定数据库长度溢出,因为该字段数据库的长度是varchar2(10)即10byte只能存3.3333个不到4个汉字(因为一个汉字如果GBK\GB2312编码占2个字节,但是unicode\utf-8编码占3个字节)。# M+ @) z+ z1 g8 b9 a2 [- u
 
- t" k4 Q  R9 d9 v0 Y 所以仅maxlength=10不能正确的限制输入,还要加上js-pattern-number这个限制(这个确保输入的是整数,这样汉字就输入不进去了)。
2 t/ ]( Y+ J7 h' G4 H  e 总结1 n) Z6 K' C( Q/ b* {
到此这篇关于amazeui页面校验功能的实现代码的文章就介绍到这了,更多相关amazeui页面校验内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
  X) j6 [7 `5 t! P" C* [9 D$ g! h' K& P' ?" H% [
来源:http://www.jb51.net/html5/742055.html: q$ V. m! F( m, o3 D0 i
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

帖子地址: 

梦想之都-俊月星空 优酷自频道欢迎您 http://i.youku.com/zhaojun917
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|梦想之都-俊月星空 ( 粤ICP备18056059号 )|网站地图

GMT+8, 2026-3-17 23:51 , Processed in 0.113661 second(s), 23 queries .

Powered by Mxzdjyxk! X3.5

© 2001-2026 Discuz! Team.

快速回复 返回顶部 返回列表