ExtJS 的表单验证机制(Form Validation)

最新推荐文章于 2021-08-05 22:16:08 发布
最新推荐文章于 2021-08-05 22:16:08 发布
阅读量7.3k 收藏 5
点赞数 1
分类专栏： ExtJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/magicboylinw/article/details/8472674
版权

在 Extjs 中，表单(form)提供了各种各样的验证机制和方法，在这里总结一下

在讲解表单验证前需要先说一下错误提示(Tips)的配置

在 Ext.onReady 中添加以下两行代码：
 
//初始化组件的信息提示功能
Ext.QuickTips.init();
//指示错误提示出现的方式
Ext.form.Field.prototype.msgTarget = 'under';      
msgTarget 可以是以下选项：
qtip      当鼠标移动到控件上面时显示提示
title     在浏览器的标题显示
under     在控件的底下显示提示 
side      在控件右边
最低0.47元/天 解锁文章
小威
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Extjs表单的数据校验以及正则表达式校验
鼻孔猫加油站
03-13 6741
Extjs表单验证包括空验证、用vtype格式进行简单的验证、高级自定义密码验证、使用正则表达式验证等等。验证可以使用js提供的脚本来进行代码编写，但ext本身对表单进行了封装，并允许客户对其进行扩展，因此使用Extjs提供的验证能够大大简化验证判断。 在验证之前，先看下面两个语句： //放在onReady的function(){}中 Ext.QuickTips.init(); //为组件提
ExtJs 备忘录（3）—— Form表单（三） [ 数据验证 ]
weixin_33936401的博客
09-20 134
前言 　　 本章主要讲ExtJS表单验证方面，正好趁着周末多写两篇，一边梳理之前用过的代码，一边就地取材补充相关方面的资料，算是温习+补习吧 : ) 系列 　　1.　　ExtJs 备忘录（1）—— Form表单（一） [ 控件使用 ] 　　2.　　ExtJs 备忘录（2）—— Form表单（二） [ 控件封装 ] 　　3.　　ExtJs 备忘录（3）—— Form表单（三） [ ...
ext js ajax表单校验,ExtJs4 validator 文本框ajax校验-form.validate()有效
weixin_39895684的博客
08-05 284
xtype : 'textfield',id : 'processName',name : 'processName',fieldLabel : '服务名称',labelWidth : 70,width : 400,allowBlank : false,blankText : '不能为空',validateOnChange : false,textValid : true, // 默认校验通过...
extjs 表单设置html5,ExtJs表单示例（包含输入验证）
weixin_32098487的博客
06-15 228
表单示例1HelloExt.onReady(function () {//Ext.Msg.alert('Hello窗口', 'hello');Ext.QuickTips.init(); //为组件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息。Ext.form.Field.prototype.msgTarget = 'under'; //提示的显示方式var subriver =...
Extjs form validate表单验证使用心得
weixin_30627381的博客
07-18 175
extjs表单验证//放在onReady的function（）{}中Ext.QuickTips.init(); //为组件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息。Ext.form.Field.prototype.msgTarget='side'; //提示的方式，枚举值为 qtip-当鼠标移动到控件上面时显示提示 title-在浏览器的标题显示，但是测试结果是...
ExtJs表单验证的方法总结
长江七号
02-12 1402
一、基本验证方式，使用vtype属性。 1.alpha只能输入字母，无法输入其他（如数字，特殊符号等） 2.alphanum只能输入字母和数字，无法输入其他 3.email验证，要求的格式是596005496@qq.com 4.url格式验证，要求的格式是http://www.baidu.com 二、其他方式验证。 1.验证最大最小输入字数。（Ext中maxLe
Extjs表单常见验证小结
10-26
总结来说，ExtJS表单验证提供了丰富的选项，从基础的空验证和简单的vtype验证，到自定义函数验证和正则表达式验证，几乎可以覆盖所有常见的验证需求。通过这些验证方式，开发者可以确保用户输入的数据既安全又符合...
Extjs优化(二)Form表单提交通用实现
10-27
函数内部使用了EXTJS的API进行操作，如`getForm()`用于获取表单对象，`submit()`用于提交表单，并且通过`scope`指定回调函数的上下文，`url`定义了提交的URL，`method`指定了HTTP方法，`params`包含了额外的请求参数...
解决Extjs4中form表单提交后无法进入success函数问题
10-26
form表单提交后无法进入success函数的问题，很是常见，下面有个不错的解决方法，感兴趣的朋友可以参考下
ExtJs 表单提交登陆实现代码
10-28
上一篇简单做了一个用ext写的登陆界面，今天来实现登陆效果，主要是回顾下ext中表单提交方法的使用。
ext表单验证问题---验证是否可以提交
小杰的专栏
06-09 4128
由于刚开始使用ext，对表单进行验证完后，即使验证不通过，
Extjs form validate 表单验证 代码 总结 心得
热门推荐
nailwl
07-01 1万+
<br />extjs表单验证 //放在onReady的function（）{}中 Ext.QuickTips.init(); //为组件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息。 Ext.form.Field.prototype.msgTarget='side'; //提示的方式，枚举值为 qtip-当鼠标移动到控件上面时显示提示 title-在浏览器的标题显示，但是测试结果是和qtip一样的 under-在控件的底下显示错误提示 si
【ExtJs】ExtJs的表单插件与表单布局、提交与验证
编程记录，亲测有效
04-28 3717
利用ExtJs的Anchor可以为ExtJs自带的表单Form各个组件进行布局，当然，使用《【ExtJs】带日期组件的文本输入框、容器与Ext.Msg.alert告警框告警两次》（点击打开链接）中的vbox也是可以的。其实ExtJs的表单插件与表单布局并不是关键，ExtJs的表单验证还好，就几行语句就能够完成。关键是ExtJs的表单提交必须通过Ajax方式，而在后台必须传回一个Json完成表单的提
Extjs form 验证
kanpiaoxue的专栏
02-26 95
var form = Ext.getCmp('createTempTableFormId'); if(!form.form.isValid()){ confirmWarning('请输入必要的内容'); return; }  
extjs 表单验证实例
adolfsabin的专栏
05-03 1万+
//放在onReady的function（）{}中Ext.QuickTips.init();                       //为组件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息。Ext.form.Field.prototype.msgTarget=side;         //提示的方式，枚举值为qtip-当鼠标移动到控件上面时显示提示title-
extjs表单验证
weixin_34232617的博客
09-03 88
extjs表单验证   //放在onReady的function（）{}中   Ext.QuickTips.init(); //为组件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息。   Ext.form.Field.prototype.msgTarget='side'; //提示的方式，枚举值为       qtip-当鼠标移动到控件上面时显示提示       t...
ExtJS 表单验证
玉无瑕
06-17 139
[b]使用特定类型的表单组件[/b] [b]使用regex正则表达式对输入内容进行验证[/b] [b]使用VType对输入内容进行验证[/b]1.alpha //只能输入字母，无法输入其他（如数字，特殊符号等） 2.alphanum//只能输入字母和数字，无法输入其他 3.email//email验证，要求的格式是"usc@sina.com" 4.url//url格式验证，要求的格式是h...
extjs4.2 Form表单 提交
最新发布
06-07
提交 ExtJS 4.2 Form表单有两种方式：通过表单的submit()方法提交和通过Ajax请求提交。 1. 通过表单的submit()方法提交 ``` Ext.getCmp('formId').submit({ url: 'yourUrl', method: 'POST', success: function(form, action) { // 成功后的操作 }, failure: function(form, action) { // 失败后的操作 } }); ``` 2. 通过Ajax请求提交 ``` Ext.Ajax.request({ url: 'yourUrl', method: 'POST', params: Ext.getCmp('formId').getValues(), success: function(response) { // 成功后的操作 }, failure: function(response) { // 失败后的操作 } }); ``` 其中，`Ext.getCmp('formId').getValues()` 方法可以获取表单的所有值，也可以通过 `Ext.getCmp('formId').getForm().getValues()` 方法获取表单的所有值。在提交表单时，需要设置提交的URL和提交方式，提交成功后执行success回调函数，失败后执行failure回调函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值