ExtJs表单验证的方法总结
一、基本验证方式，使用vtype属性。
1.alpha只能输入字母，无法输入其他（如数字，特殊符号等）
2.alphanum只能输入字母和数字，无法输入其他
3.email验证，要求的格式是596005496@qq.com
4.url格式验证，要求的格式是http://www.baidu.com
二、其他方式验证。
1.验证最大最小输入字数。（Ext中maxLength和minLength不太管用！）
|
1
2
3
4
|
maxLength : 20, //允许输入的最大字符数
maxLengthText : "用户帐号最大长度不能超过20个字符！" , //提示文本
minLength : 3, //允许输入的最少字符数
minLengthText : "用户帐号最小长度不能少于3个字符！" , //提示文本
|
注意：中文字符不是两个字符，比如“你好”算2个字符。
2.正则表达式验证。
|
1
2
|
regex : /^(([0-9]+[a-zA-Z]+)|([a-zA-Z]+[0-9]+))$/,
regexText : "对不起，用户帐号只能输入字母和数字！" ,
|
三、vtype实现高级验证。
因为Extjs的vtype只实现了四种基本的验证方式，所有需要自己去创建新的验证方式。
在表单初始化时后面加入代码
|
1
2
3
4
5
|
Ext.apply(Ext.form.VTypes, {
verifycustomer : function (value) { //验证方法名
//验证方法
}
});
|
设置控件的vtype属性为自定义的验证方法名和提示文本vtypeText属性。
|
1
2
|
vtype : "verifycustomer" ,
vtypeText : "对不起，客户账号已经存在！" ,
|
例如：
|
1
2
3
4
5
6
7
8
9
10
|
Ext.apply(Ext.form.VTypes,
{ // 年度必须是4位的验证
numCheck : function (val, field){
if (val.match(/\d/g).length != 4){
return false ;
}
return true ;
},
numCheckText : '请输入4位数的年度！'
}
|
最后只要使用vtype : 'numCheck'即可。
实例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<title>validate.html</title>
<meta http-equiv= "keywords" content= "keyword1,keyword2,keyword3" >
<meta http-equiv= "description" content= "this is my page" >
<meta http-equiv= "content-type" content= "text/html; charset=UTF-8" >
<link rel= "stylesheet" type= "text/css" href= "../ext/resources/css/ext-all.css" >
<script type= "text/javascript" src= "../ext/adapter/ext/ext-base.js" ></script>
<script type= "text/javascript" src= "../ext/ext-all.js" ></script>
<script type= "text/javascript" >
Ext.onReady( function (){
Ext.QuickTips.init();
// 非空验证，通过allowBlank:false实现
var name = new Ext.form.TextField(
{
name: "name" ,
fieldLabel: "用户名" ,
allowBlank: false ,
blankText: "用户名不能为空！" ,
width:300,
renderTo:document.body
}
);
// 长度验证
var pwd = new Ext.form.TextField(
{
name: "pwd" ,
fieldLabel: "密码" ,
inputType: "password" ,
minLength:6,
maxLength:16,
minLengthText: "密码至少6位！" ,
maxLengthText: "密码最多16位！" ,
width:300,
renderTo:document.body,
allowBlank: false ,
blankText: "密码不能为空！"
}
);
// vtype验证。可以验证包含以下：1.字母和下划线(alpha)。2.字母、数字、下划线(alphanum)。3.邮箱(email)。4.网址(url)
var url = new Ext.form.TextField(
{
name: "url" ,
fieldLabel: "网址" ,
allowBlank: false ,
blankText: "网址为必输项！" ,
vtype: "url" ,
vtypeText: "您的网址输入有误！" ,
width:300,
renderTo:document.body
}
);
// 正则表达式验证
var file = new Ext.form.TextField(
{
name: "name" ,
fieldLabel: "Name" ,
width:300,
allowBlank: false ,
blankText: "name字段不能为空！" ,
renderTo:document.body,
regex:/^w{8,}$/, //至少6个字符
invalidText: "请输入至少8这个字符！"
}
);
});
</script>
</head>
<body>
</body>
</html>
|
ExtJs表单验证的方法总结相关推荐
- bootstrap from必填_bootstrap 表单验证使用方法
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- vant表单点击提交没有触发验证_vant(ZanUi)结合async-validator实现表单验证的方法
感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 最近在开发一个移动端商城项目,用到了有赞的 vant ,因为最近大都采用 element ui 在做PC端的东西,对比来说,vant的完成 ...
- angularjs php登录验证,AngularJs表单验证的方法
Anjularjs表单验证 能够根据用户在表单中输入的内容给出实时视觉反馈是非常重要的.在人与人沟通的语境中,表单验证给出来的反馈同获得正确输入同等重要. 表单验证不仅能给用户提供有用的反馈,同时也能 ...
- NSS_08 extjs表单验证
Extjs做了非常好的表单验证功能, 使用起来非常方便. 系统内置了4种验证功能,分别是alpha, alphanumeric,url, email, 在程序中可以直接使用,(可以结合allowBla ...
- 常用的表单验证Js方法，身份证、手机号码、固定电话正则验证建议收藏
平时做项目时,经常会用到很多使用频率很高的代码,一有问题都习惯性问度娘!把自己都养懒了. /* 表单验证*/// 验证手机号码 function PhoneMustBePostiveInt(phone ...
- extjs 表单验证实例
//放在onReady的function(){}中 Ext.QuickTips.init(); //为组件提供提示信息功能,form的主要提示信息就是客户端 ...
- ExtJs Form 表单验证
extjs表单验证 //放在onReady的function(){}中 Ext.QuickTips.init(); //为组件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息. Ext ...
- SSM框架笔记14：Spring MVC表单验证
Spring MVC表单验证 在Spring MVC中,表单验证有三种方法. 一.基本校验 这种方法是基于handler的,优点是定义方便,缺点是不便于复用. 1.两个接口:Errors/Bi ...
- 关于Vue的表单验证
前言 最近在研究 Vue 如何实现表单的验证,在网上查阅资料以后,简单将这些方法整合一下,方便以后学习.如果有不准确之处,还望指正. Vue 实现表单验证的方法有如下几种: 一.基于 Vue 与 jQ ...
最新文章
- 数据库期末复习重点，临时抱佛脚高分通过考试
- 内容管理系统 Nuxeo认证绕过和RCE漏洞（CVE-2018-16341) 分析
- 一个直接运行Windows命令行的软件
- K8S报错：controller-manager Unhealthy Get http://127.0.0.1:10252/healthz: dial tcp 127.0.0.1:10252
- P1145 约瑟夫 W（模拟）
- java 单元测试_在springboot中写单元测试解决依赖注入和执行后事务回滚问题
- 9 MM配置-主数据-维护物料管理的公司代码
- C++中Future和Promise的一种简单实现
- In 2018, the release of Huawei‘s p20 pro
- Linux C编程之流操作fopen函数的mode
- MATLAB R2018a 安装教程
- 六度空间的应用——找出两个陌生人之间的关系(二)
- 在linux下运行.o文件,Linux环境下在可执行程序中嵌入资源文件
- 前端遇到GET https://XXXX net::ERR_HTTP2_PROTOCOL_ERROR 200问题的解决办法
- 迭代期望和方差（iterated expectation,variance)
- 【洛谷题解】B2033 A*B 问题
- 661. Image Smoother
- 中性策略、回测结果对比、OK实盘报错“Close order size exceeds your available size”、OK开通新账户注意事项
- NEON 常用函数及其执行结果
- navicat premium连接失败-修改ssh密码后，解决mysql 连接 ssh 的时候出现错误