(21)ExtJS之使用VType验证

最新推荐文章于 2020-12-31 15:39:41 发布
最新推荐文章于 2020-12-31 15:39:41 发布
阅读量1.6k 收藏
点赞数
分类专栏： ExtJS案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xuan6251237011/article/details/20084513
版权
本文详细探讨了ExtJS中如何利用VType进行表单验证，通过实例讲解了各种内置验证类型以及自定义验证规则的设置，帮助开发者提升表单数据的准确性和安全性。
摘要由CSDN通过智能技术生成

JS文件：

//6：表单中使用VType验证示例
Ext.onReady(function(){
	Ext.QuickTips.init();
	Ext.create('Ext.form.Panel',{
		title:'vtype示例',
		width:300,
		frame:true,
		renderTo:Ext.getBody(),
		bodyPadding:5,
		defaultType:'textfield',
		fieldDefaults:{
			labelSeparator:':',
			labelWidth:80,
			width:270,
			msgTarget:'side'
		},
		items:[{
			fieldLabel:'电子邮件',
			vtype:'email'
		},{
			fieldLabel:'网址',
			vtype:'url'
		},{
			fieldLabel:'字母',
			vtype:'alpha'
		},{
			fieldLabel:'字母和数字',
			vtype:'alphanum'
		}]
	});
	
});


JSP文件： 

<%@ page
了解本专栏 订阅专栏 解锁全文 超级会员免费看
无人与我共黄昏
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
Extjs表单常见验证小结
10-26
ExtJS支持的内置vtype验证还包括`alpha`（仅允许字母）、`alphanum`（字母和数字）等。 3. 高级自定义密码验证 除了内置的vtype验证，还可以通过自定义函数进行更复杂的验证。例如，我们可以创建一个自定义的`...
Ext中的vtype和xtype归纳
ziliang871118的专栏
02-10 4128
本文列举了常用的xtype，备开发时查阅使用用xtype会自动使用“延迟渲染”，这一点是和使用new直接创建组件最大的区别xtype            类 Class-------------    ------------------box              Ext.BoxComponentbutton           Ext.Buttoncolorpalette     Ext.ColorPalettecomponent        Ext.Componentcontainer    
Ext自定义Vtype示例
在实验室——宅出一片未来
01-24 2891
Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = "resources/images/default/s.gif"; Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = side; //自定义VTypes类型，验证日期范围 Ex
jQuery3
weixin_45012866的博客
12-31 144
jQuery事件绑定 jQuery有两种绑定事件的方式。 jQuery事件解绑，移除 jQuery事件冒泡和默认行为 什么是事件冒泡？ 怎么阻止事件冒泡？ 什么是默认行为？ 怎么阻止默认行为？
Extjs form 组件
06-07 197
Extjsform组件1、Ext.form.Action配置项：success：执行成功后回调的函数，包括两个参数：form和actionfailure：执行失败后回调的函数，包括两个参数：form和actionmethod：表单的提交方式，有效值包括GET、POSTparams：传递到请求中的...
表单验证（使用Vtype）
weixin_34384681的博客
02-03 432
2019独角兽企业重金招聘Python工程师标准>>> ...
extjs vtype 扩展正则
02-15
Extjs表单VTYPE扩展，方便验证！
Extjs验证表单 Extjs验证表单
03-11
本文将深入探讨Extjs中的表单验证机制，包括错误信息提示方式、内置验证属性、Vtype验证以及自定义验证方法。 #### 二、Extjs 错误信息提示方式 在进行任何形式的验证之前，首先需要配置错误信息的提示方式。Extjs...
extjs表单验证特殊字符
08-21
每个表单字段都可以配置验证规则，通过`vtype`属性定义基本的验证类型，或者使用`validators`属性自定义验证函数。对于特殊字符的验证，我们通常会关心如何限制或排除某些特定字符。 1. **基本验证类型（vtype）**...
Extjs页面验证
04-27
首先，ExtJS提供了多种内置的验证方法和组件属性，例如`vtype`和`fieldValidator`，用于在用户提交表单前验证字段内容。`vtype`是预定义的验证类型，如邮箱、数字等，可以简单快速地设置字段的验证规则。例如，对于...
extjs增删改查典型案例
12-03
function showUserForm() { //将变量定义成局部变量，避免每次都生成一个新对象 var userForm = null; userForm = new Ext.FormPanel({ id:'conditionForm', labelWidth:'80', labelAlign:'right', border:false, bodyBorder:false, frame:true, items:[ layout:'column', items:[ { columnWidth:'.8', items:{ name:'userInfo.userId', hiddenName:'userInfo.userId', //hiddenName动态的绑定数据库中对应的字段 xtype:'textField', //xtype可以分为三类,textField为表单域的控件 fieldLabel:'用户编码*',//控件前的文本说明 labelSeparator:'', blankText : '填写用户编码', //为空的文本框提示信息 allowBlank:false, //不允许为空 maxLength:'50', //文本框允许输入的最大的长度,最小的minLength vtype:'specialChar', anchor:'80%' } },{ columnWidth:'.8', items:{ name:'userInfo.userName', hiddenName:'userInfo.userName', xtype:'textField', fieldLabel:'用户姓名*', labelSeparator:'', blankText:'填写用户姓名', allowBlank:false, maxLength:'100', vtype:'specialChar', anchor:'100%' } },{ columnWidth:'.8', items:{ name:'userInfo.pwd', hiddenName:'userInfo.pwd', xtype:'textField', inputType:'password', fieldLabel:'用户密码*', labelSeparator:'', blankText:'填写用户密码', allowBlank:false, maxLength:'12', minLength:'6', value:'123456', //用户默认的秘密 anchor:'100%' } },{ columnWidth:'.8', items:{ name:'rPwd', hiddenName:'rPwd', xtype:'textField', inputType:'password', fieldLabel:'确认密码*', labelSeparator:'', blankText:'二次输入的秘密要相同', allowBlank:false, vtype:'pwdRange', pwdRange:{begin:'userInfo.pwd',end:'rPwd'}, maxLength:'12', anchor:'100%' }
extjs 常用vtype 代码
11-12
extjs 常用vtype 代码 Ext.VTyps常用vtype大全！
input实用vtype数据校验
小妖的黑色城堡的博客
10-22 3105
input实用vtype数据校验
根据选择内容不同，动态的显示JSP中的字段输入框或者选择框
cxfjava的博客
09-11 2086
一、JSP页面中 我做的是根据“所属课程”字段的更改，选择视频地址跟视频ID是否要显示出来，所以在“所属课程”字段中增加了courseChange()事件 &lt;tr&gt;                     &lt;td style="width:20%"&gt;所属课程：&lt;span style="color:red"&gt;*&lt;/span&gt;&lt;/td&
Vtype 判断密码重复
05-05 1491
Ext Vtype 表单验证2009-09-11 16:58 在ExtJS中，使用了四种自定义，分别是alpha,alphanum,email,url，分别用来验证表单中的值是否符合字母、字母数 字、电子邮件、URL等格式。但在实际应用中，我们需要验证的格式或者规则还是很多的。由于ExtJS是开源的框架，因此，我们可以扩展vtype的功 能，实现自定义的vtyp
Extjs Vtype 基础学习
qianmianz的博客
09-07 363
EXT2.0  Vtype中实现了四种基本验证方式： 1.alpha 验证是否包含除字母之外的其他字符 2.alphanum 验证是否包含除字母和数字之外的其他字符。 3.email  验证是否是有效的email地址。 4. url 验证是否为有效的url地址格式 ============================================================ ...
EXTJS 使用vtype 注意点
yanliguoyifang的专栏
12-17 792
Ext.QuickTips.init();    功能： 在鼠标移动上去需要出现提示的功能的初始化，比如字段校验失败了，鼠标移动到字段上面就会出现提示“字段不能为空”等信息 allowBlank 属性就是是否允许为空，默认是true,设为false就是必填字段 Ext.form.Field.prototype.msgTarget="" 是用来标识全局字段如果校验失败，提示信息应
ExtJS中使用vtype
sjyingwei的专栏
11-16 728
ExtJS中使用vtype 在ExtJS中vtype相当于一个预定义的客户端数据校验，每一种vtype都对应某一种特定的数据校验，比如说Email，IP地址，手机号等等。为了能够正确的使用它，需要注意以下四个方面： 在onReady方法中，必须调用Ext.QuickTips.init();方法，我是花了九牛二虎之力才发现这个的。因为我是从别的地方直接拷贝了一个FormPanel的定义，
Ext中的vtype和xtype
SERLIN
08-22 2513
xtype会自动使用“延迟渲染”，这一点是和使用new直接创建组件最大的区别 xtype            类 Class -------------    ------------------ box              Ext.BoxComponent button           Ext.Button colorpalette     Ext.ColorPalet
ExtJS4文本框使用正则表达式验证详解
"这篇资源主要介绍了如何在ExtJS4中使用正则表达式对文本框(textField)进行验证，包括两种不同的验证提示方式，并提供了多个具体的正则表达式实例，覆盖了邮政编码、中文、数字、URL、整数、IP地址、电话号码和手机...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值