【ExtJS】FormPanel表单验证

摘要:
在Extjs中,FormPane表单提供了各种各样的验证。出现错误提醒有两种方法:1、Ext.form.Field.prototype.msgTarget='side';//在onReady的function({})内添加2、msgTarget:'side'                //在form的各子控件内添加错误提示参数为:qtip-当鼠标移动到控件上面时显示提示//默认值为qtip,使用此种方式必须声明Ext.QuickTips.init();进行初始化title-在浏览器的标题显示under-在控件的底下显示错误提示side-在控件右边显示一个错误图标,鼠标指向图标时显示错误提示.默认值.id-[elementid]错误提示显示在指定id的HTML元件中。

在Extjs中,FormPane表单提供了各种各样的验证。

在表单验证前需要在onReady的function({})内添加以下代码:

Ext.QuickTips.init();              //为组件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息。

出现错误提醒有两种方法:

1、Ext.form.Field.prototype.msgTarget='side'; //在onReady的function({})内添加

2、msgTarget : 'side'                //在form的各子控件内添加

错误提示参数为:

qtip-当鼠标移动到控件上面时显示提示 //默认值为qtip,使用此种方式必须声明Ext.QuickTips.init();进行初始化
title-在浏览器的标题显示

under-在控件的底下显示错误提示

side-在控件右边显示一个错误图标,鼠标指向图标时显示错误提示. 默认值.
id-[element id]错误提示显示在指定id的HTML元件中。

和表单验证相关的属性及验证顺序:

1.是否为空

allowBlank : Boolean
blankText : String

2.输入数据长度限制

minLength : Number
minLengthText : String
maxLength : Number
maxLengthText : String

3.使用vtype验证

vtype : String
vtypeText : String

4.使用validator编写自定义函数验证

validator : Function

5.使用自己编写的正则表达式regex

regex : RegExp
regexText : String

ps:可以进行多项验证,如非空验证与中文验证,同时有效。

代码:

Ext.onReady(function(){

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget='side';  

var formPanel = Ext.create('Ext.form.Panel', {

title: 'Form',

400,

layout: 'anchor',

items: [{

xtype : 'textfield',

fieldLabel: 'Name',

name: 'name',

anchor : '100%',

allowBlank : false,

blankText : '不得为空',

regex : /[u4e00-u9fa5]/, //自定义验证

regexText : '只能输入中文'

}]

});

免责声明:文章转载自《【ExtJS】FormPanel表单验证》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇php大文件上传(切片)方法curl 交叉编译 支持http2和openssl下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

snoopy(强大的PHP采集类) 详细介绍

Snoopy是一个php类,用来模拟浏览器的功能,可以获取网页内容,发送表单,可以用来开发一些采集程序和小偷程序,本文章详细介绍snoopy的使用教程。 Snoopy的一些特点: 抓取网页的内容 fetch 抓取网页的文本内容 (去除HTML标签) fetchtext 抓取网页的链接,表单 fetchlinks fetchform 支持代理主机 支持基本...

用C#搭建IE BHO勾子, 取表单密码

授权CSDN, 请在征求同意后转载. 作者: 陈嘉, NetSecure Inc, Canada, 软件工程师 微软在1997年正式退出Browser Helper Object (BHO), 使程序员能够更好的对IE进行二次开发和操作. 在通过编写BHO程序数月后, 我希望把我的一些经验告诉才开始的同志, 避免走一些弯路. 我本人是非常喜欢C++的....

[转载]ExtJs4 笔记(6) Ext.MessageBox 消息对话框

 作者:李盼(Lipan) 出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有。转载时须注明本文的详细链接,否则作者将保留追究其法律责任。 本篇演示消息对话框的用法,ExtJs封装了可能用到的各类消息框,并支持自定义的配置。 如下是用到的html: [html] <h1>各...

03- web表单测试

软件分为 b/s c/s两种架构 表单测试 1.用户注册,登录,信息提交。 2.用户查询商品。 3.用户订购商品。 4.用户查询订单等。 表单测试实例   表单数据添加测试(一) 添加按钮可用,测试点击添加按钮,能够进入响应的添加页面; 进入添加页面,验证输入字段和需求描述一致; 所有的输入字段输入合法数据;  表单数据添加测试(二) 重复提交信息,如一...

【H5】15 表单 其四 数据发送

一旦在客户端上验证了表单数据,就可以提交表单了。 并且,由于我们在上一篇文章中介绍了验证,因此我们准备提交! 本文着眼于用户提交表单时会发生什么—数据将流向何处,以及到达表单后如何处理? 我们还将研究与发送表单数据相关的一些安全问题。 先决条件: 基本的计算机知识,对HTML的理解以及HTTP和服务器端编程的基本知识。 目的: 了解提交表单数据...

Jsp基础知识

Jsp:Java Server Pages http://127.0.0.1:8080/weba/hello.html Tomcat执行过程: 浏览器通过http协议发送请求,以TCP协议作为底层,去tomcat的安装目录下找到webapps下的weba文件夹,再继续找到hello.html. http协议有协议头和协议头,底层是TCP,是无状态的,两次连...