在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',
width: 400,
layout: 'anchor',
items: [{
xtype : 'textfield',
fieldLabel: 'Name',
name: 'name',
anchor : '100%',
allowBlank : false,
blankText : '不得为空',
regex : /[\u4e00-\u9fa5]/, //自定义验证
regexText : '只能输入中文'
}]
});